Question

JavaScript 和 HTML：事件监听器未按预期产生文本警报；ReferenceError：按钮未定义

2019-07-21

379

javascript function dom alert addeventlistener

我试图在 DOM（网页）上实现事件监听器，当用户在输入框内提交输入时，它会发出警报。

这是我的 HTML 代码：

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <title>DOM Examples</title>
    <!--  <link rel="stylesheet" href="main.css"></link>  -->

</head>


<body>

    <h1 id="title">This is my Title </h1>

    <input type="text" placeholder="some text">
    <button id='submit-text-btn'>Submit</button>

    <p>
        This is the text that is going to display. 
        I really need to figure out how to balance the next week out. 
        Maybe just pour myself into this and finish recursion, classes, plus guessing game quickly. 
    </p>


    <script src="dom.js"></script>


</body>


</html>

这是我的 JS 代码：

function getInputAndUpdate(inputElement){
    const text = inputElement.value;
    inputElement.value = '';
    alert(text);
}

button.addEventListener('click', function(){

    const inputElement = document.querySelector('input');

    getInputAndUpdate(inputElement); 

});

下面是我生成的网页的屏幕截图：

我的问题是，当我在输入框中输入文本并单击提交时，什么也没有发生。根本没有弹出任何警报消息。

以下是我在控制台中看到的错误：

dom.js:10 Uncaught ReferenceError: button is not defined

Answer 1

那是因为 按钮 变量您正在添加事件侦听器。 href =“ https://developer.mozilla.org/en-us/docs/web/api/document/document/getelementbyid” rel =“ nofollow noreferrer”> docuct.getelementbyid （哪个（哪个）检索具有ID的元素 - 注意ID必须是唯一的）， docuct.getElementsbyclassname （检索所有具有类的元素）或 docuct.getelementsbytagname （在这种情况下，以其标签名称检索所有元素）。

，因为在这种情况下，因为您已经在按钮上使用ID，可以使用 document.getElementById ：

428858029 检索元素。

Answer 2

只需像这样选择您的按钮

const button = document.getElementById("submit-text-btn");

Stepan Vanzuriak

2019-07-21