英文:
Why can I not execute my javascript function by using an event listener?
问题
const btn0 = document.querySelector('.btn0');
btn0.addEventListener('click', function() {
showNum(0);
})
function showNum(value)
<input type="button" value="0" name="btn0" id="btn0" />
我已包括上述相关代码。showNum函数已完全实现并正常工作，我只是没有包括它因为它与问题无关。
我需要使用事件侦听器调用showNum函数，但无法弄清楚为什么我的代码不起作用。在调试时，我可以看到addBtn为null，而无论我尝试什么方法，它都保持不变。我已经为此苦苦挣扎了一个小时，对于应该如此简单的问题感到沮丧。
我已尝试不同的初始化addBtn的方法，比如使用getElementByName，但在通过程序进行调试时，btn0始终为null。
英文:
Javascript
const btn0 = document.querySelector('.btn0');
btn0.addEventListener('click', function() {
showNum(0);
})
function showNum(value)
HTML
<input type="button" value="0" name="btn0" id="btn0" />
I have included the relevant code above. The showNum function is fully implemented and working, I just didn't include it because it was irrelevant.
I need to call the showNum function with an event listener but can't figure out why my code is not working. When debugging I can see that addBtn is null and no matter what I try it stays that way. I have been struggling with this for an hour and am frustrated at how simple it should be.
I have tried different ways of initializing addBtn such as using getElementByName, but when debugging through the program btn0 is always null.
答案1
得分: 1
btn0 不是一个 class，而是一个 id，所以你必须在代码中使用 # 替代 .，如下所示：
const btn0 = document.querySelector('#btn0'); // CHANGE
btn0.addEventListener('click', function() {
showNum(0);
})
function showNum(value) {
console.log('Inside showNum function with value: ', value);
}
你也可以使用属性来查找按钮，如下所示：
const btn0 = document.querySelector('[name="btn0"]'); // CHANGE
btn0.addEventListener('click', function() {
showNum(0);
})
function showNum(value) {
console.log('Inside showNum function with value: ', value);
}
英文:
btn0 is not a class instead it is an id so you have to use # in place of . in
const btn0= document.querySelector('#btn0');
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const btn0 = document.querySelector('#btn0'); // CHANGE
btn0.addEventListener('click', function() {
showNum(0);
})
function showNum(value) {
console.log('Inside showNum functon with value: ', value);
}
<!-- language: lang-html -->
<input type="button" value="0" name="btn0" id="btn0" />
<!-- end snippet -->
You can also find button using attribute also as:
document.querySelector('[name="btn0"]');
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const btn0 = document.querySelector('[name="btn0"]'); // CHANGE
btn0.addEventListener('click', function() {
showNum(0);
})
function showNum(value) {
console.log('Inside showNum functon with value: ', value);
}
<!-- language: lang-html -->
<input type="button" value="0" name="btn0" id="btn0" />
<!-- end snippet -->
答案2
得分: 0
你正在使用querySelector来选择具有类名.btn0的按钮元素。但是，在HTML中，按钮元素具有ID btn0，而不是类名。
要按ID选择元素，应该使用getElementById方法，而不是querySelector。尝试将你的代码更改为以下内容：
const btn0 = document.getElementById('btn0');
btn0.addEventListener('click', function() {
showNum(0);
});
英文:
You a are using querySelector to select the button element with the class name .btn0 However, in the HTML , the button element has an ID of btn0, not a class name.
To select an element by ID, you should use the getElementById method instead of querySelector. Try changing your code to the following:
const btn0 = document.getElementById('btn0');
btn0.addEventListener('click', function() {
showNum(0);
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论