在 HTML 表单中创建 HTML 文本并在 Javascript 警报框中打开该文本

Question

我是编码新手，需要在页面上的 HTML 表单中创建 HTML 文本，并在 Javascript 警报框中打开该文本。我尝试了各种代码但没有成功。这是我到目前为止所想出的，它不会创建弹出警报框：

这是 HTML 和 JS：

Function myfunction1()

{

  Let myfun1 = document.getElementById('sec1-input').value;

  Alert(myfun1);

}

<div class="form-group">

    <label for="sec1-input"><strong>Enter Alert Text: </strong></label>

    <input type="text" class="form-control" id="sec1-input">

</div>

<button id="sec1-btn1" type="button" class="btn btn-primary">Alert Me!</button>

Answer 1

我不确定您想要什么，但我将向您展示如何完全按照您的要求制作警报窗口。首先，你必须考虑你所犯的几个错误。JavaScript 无法识别 Function 这个词，因为它是大写的。函数关键字必须小写。最后，要实现您想要的效果，您需要使用事件，尤其是单击事件。let button = document.querySelector('#sec1-btn1');        button.addEventListener('click', function(e) {        let val = document.querySelector('#sec1-input').value;        alert(val);    });    <form>      <div class="form-group">        <label for="sec1-input"><strong>Enter Alert Text: </strong></label>        <input type="text" class="form-control" id="sec1-input" />      </div>      <button id="sec1-btn1" type="button" class="btn btn-primary">        Alert Me!      </button>    </form>

Answer 2

您还没有在任何地方调用该函数。为了让它工作，你需要使用一个监听器。<div class="form-group">&nbsp; &nbsp; <label for="sec1-input"><strong>Enter Alert Text: </strong></label>&nbsp; &nbsp; <input type="text" class="form-control" id="sec1-input"></div><button onclick="myfunction1()" id="sec1-btn1" type="button" class="btn btn-primary">Alert Me!</button>&nbsp;<script>function myfunction1() {&nbsp; let myfun1 = document.getElementById('sec1-input').value;&nbsp; alert(myfun1)}</script>我添加了onClick监听器button，现在它可以工作了。

Answer 3

你不应该用大写字母来启动像alert这样的javascript函数。将这段代码代替您的按钮：<button id="sec1-btn1" type="button" class="btn btn-primary" onclick="myfunction1()">Alert Me!</button>

Answer 4

javaScript 区分大小写function myfunction1(){&nbsp; let myfun1 = document.getElementById('sec1-input').value;&nbsp; alert(myfun1);}<div class="form-group">&nbsp; &nbsp; <label for="sec1-label"><strong>Enter Alert Text: </strong></label>&nbsp; &nbsp; <input type="text" class="form-control" id="sec1-input"></div><button id="sec1-btn1" type="button" onClick="myfunction1()" class="btn btn-primary">Alert Me!</button>&nbsp;另外元素的 ID 不应该相同，要分配相同的选择器，使用类，并且您还需要将函数提供给元素的事件侦听器