Question

我正在大学读第一年的网页设计。我们刚刚开始，我正在尝试用我对html的基本知识做不同的事情。我的问题是如何在单击按钮后显示在表单中输入的文本？我尝试了一些东西，但它没有用。

这是我的错误代码：

 <body>
    <script> 
        function name(name1)
        { alert ("Your name is" + name1)
        }
    </script>

    Enter a name:
    <form> <input type="text" name="name1"/></form> </br>

    <button onclick="name(name1)">Click!</button>
</body>

Answer 1

您可以使用querySelector，使用attribute selector来获取元素。

<script>
  function yourMethod(name1) {
    var inputName = document.querySelector('input[name=' + name1 + ']').value;
    console.log("Your name is: " + inputName)
  }
</script>

Enter a name:
<input type="text" name="name1" />
<button onclick="yourMethod('name1')">Click!</button>

Answer 2

试试这个

<body>
    <script> 
        function name1(name)
        { 
        alert("Your name is " + name);
        }       
    </script>

    Enter a name:
    <form> <input type="text" name="name" id="name"/></form> </br>
    <button onclick="name1(document.getElementById('name').value)">Click!</button>    

</body>

Answer 3

制作onclick="name()"

然后function name(){ alert( document.querySelector("input[name='name1']").value ) }

它的作用是单击按钮时，调用函数名称。这将通过使用querySelector查找元素来警告文本。查询选择器返回一个元素（如果找到）。您可以使用element.attributeName访问每个元素属性。

在这种情况下，您希望使用querySelecor，因为querySelectorAll将返回节点列表。其中querySelector将只返回一个元素

Answer 4

试试这个

<body>
<script> 
    function name()
    {
       var value = document.getElementById('name1').value;
       alert("Your name is" + value);
    }
</script>

Enter a name:
<form>
   <input type="text" id="name1" name="name1" />
</form>
</br>
<button onclick="name();">Click!</button>
</body>

如何使用按钮显示表单中的文本？

4 个答案: