Как использовать функцию onclick для кнопки. Когда у кнопки нет идентификатора и имени, у нее есть только класс?

Question

Я получил этот вопрос на экзамене по Javascript. Поэтому я должен использовать JS для решения этой проблемы

Как я могу использовать функцию onclick для кнопки, так как нет идентификатора и имени.

Так в этом коде я могу использовать document.getelementsbyclass? или что лучше? и как использовать document.getelementsbyclass или любую другую функцию для извлечения и сохранения данных кнопки щелчка

button type="submit" height="40px" color="white" class="Button1"> span Давайте перейдем к кнопке span

Спасибо

У меня нетпопробовал что-нибудь, потому что я не знаю правильное кодирование. Я нахожусь на стадии самоучки.

<button type="submit" height="40px" color="white" class="Button1"><span>Let's GO</span></button>

Answer 1

Вы можете использовать document.querySelector

console.log(document.querySelector(".Button1"))

<button type="submit" height="40px" color="white" class="Button1"><span>Let's GO</span></button>

onclick вы можете передать сам элемент функции, используя this ключевое слово

function a(ele)
{
console.log(ele)
}

<button type="submit" height="40px" color="white" class="Button1" onclick="a(this)"><span>Let's GO</span></button>

Answer 2

U может вызвать его с помощью getElementsByClassName, так как getElementsByClassName возвращает массив элементов, поэтому вам нужно установить порядковый номер элемента. Затем вы можете вызвать addEventListener

document.getElementsByClassName('Button1')[0].addEventListener('click', callbtn)
     function callbtn()  {
       console.log('ok')
    }
    

<button type="submit" height="40px" color="white" class="Button1">
       <span>Let's GO</span>
    </button>

Answer 3

U может вызвать его по getElementsByClassName, так как getElementsByClassName возвращает массив элементов, поэтому вам нужно установить порядковый номер элемента. Тогда вы можете позвонить addEventListener

document.getElementsByClassName('Button1')[0].addEventListener('click', () => {
   console.log('ok')
})

<button type="submit" height="40px" color="white" class="Button1">
   <span>Let's GO</span>
</button>

Answer 4

it will work

 <script src="Scripts/jquery-3.3.1.min.js"></script>
<script>
    $(document).ready(function () {
        $(".Button1").click(function () {
            alert($(this).text());
        });

    });
</script>

<button type="submit" style="height:40px; color:white;"  class="Button1"><span>Let's GO</span></button>

Answer 5

Вы можете использовать метод document.getElementsByClassName для получения вашего элемента в DOM. В отличие от getElementById этот метод будет возвращать массив, поскольку на странице может быть несколько элементов с одним и тем же классом. Если у вас есть только одна кнопка с этим className, вы можете сделать document.getElementsByClassName('Button1')[0].

Еще один похожий метод - document.querySelector, который принимает в качестве аргумента строку селектора CSS и возвращает первое вхождение элемента, соответствующего этому селектору. (если есть). document.querySelector('.Button1')