在 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">

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

    <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> 

<script>

function myfunction1() {

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

  alert(myfun1)

}

</script>

我添加了onClick监听器button，现在它可以工作了。

Answer 3

1. 你不应该用大写字母来启动像alert这样的javascript函数。

2. 将这段代码代替您的按钮：

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

Answer 4

javaScript 区分大小写

function myfunction1()

{

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

  alert(myfun1);

}

<div class="form-group">

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

    <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> 

另外元素的 ID 不应该相同，要分配相同的选择器，使用类，并且您还需要将函数提供给元素的事件侦听器