将HTML值传递给JavaScript函数

Question

我知道这个问题已经被问过了。

但是，当我按照给出的答案回答时，它是行不通的。

这是我的JS函数和相关的HTML

 function myFunction() { document.getElementById("submit").innerHTML = "LOADING..."; } 

  <input class="textbox" type="number" id="number"> <button onclick="myFunction(document.getElementById("number").value)" class="Button" >Submit</button> <p id="submit"></p> <script type ="text/javascript" src="../src/index.js"></script> 

Answer 1

尝试这个...

获取值，插入函数...。它将显示您的期望输出。

 function myFunction() { var number = document.getElementById("number").value; document.getElementById("submit").innerHTML = "LOADING..."; } 

 <input class="textbox" type="number" id="number"> <button onclick="myFunction()" class="Button" >Submit</button> <p id="submit"></p> <script type ="text/javascript" src="../src/index.js"></script> 

Answer 2

我以为，您在双引号（“）内使用了双引号（”）。 因此，请更改单引号（'）内的双引号或双引号（“）中的单引号。 更多的按钮默认类型是Submit ...

更改以下

<button onclick="myFunction(document.getElementById("number").value)" class="Button" >Submit</button>

进入

<button onclick="myFunction(document.getElementById('number').value)" class="Button" >Submit</button>

要么

<button onclick='myFunction(document.getElementById("number").value)' class="Button" >Submit</button>

javascript

function myFunction() {
  document.getElementById("submit").innerHTML = "LOADING...";
}

进入

function myFunction(num) {
      var n = num;//Get the number into your javascript function
      document.getElementById("submit").innerHTML = "LOADING...";
}

 <input class="textbox" type="number" id="number"> <button onclick="myFunction(document.getElementById('number').value)" class="Button" type="button" >Submit</button> <p id="submit"></p> <script type="text/javascript"> function myFunction(num){ var n = num; console.log(n); document.getElementById("submit").innerHTML = "LOADING..."; } </script> 

Answer 3

像之前的答案一样，您需要在“数字”周围使用单引号。 另一件事，您需要在index.js的myFunction（val）中添加参数val。

function myFunction(val) {
    document.getElementById("submit").innerHTML = "LOADING...";
    console.log(val);
}   

Answer 4

奇怪的是，没有答案建议将HTML和JavaScript分开，所以这就是我要做的。 最好不要在HTML中内联JS。

 const button = document.querySelector('button'); button.addEventListener('click', myFunction, false); function myFunction() { console.log(document.getElementById('number').value); document.getElementById("submit").innerHTML = "LOADING..."; } 

 <input class="textbox" type="number" id="number"> <button class="Button">Submit</button> <p id="submit"></p> 

Answer 5

button元素的默认类型为submit （可以，数据将被提交到服务器）。 如果应该在提交之前做一些事情，那么可以这样处理。

 function myFunction(element, evn) { //here you can rename parameters //evn is click event, element is the button clicked evn.preventDefault(); //don't submit form at this moment document.getElementById("submit").innerHTML = "LOADING..."; //now it is safe to submit the form //setTimeout is for demonstration purpose setTimeout(function() { element.form.submit(); }, 1000); } 

 <!-- form tag supposed to be open --> <form method="get" action="."> <input class="textbox" type="number" id="number" name="numData"> <!--name attr is required to send data to the server --> <!-- note the arguments sent to the function. Don't change them --> <button onclick="myFunction(this,event)" class="Button">Submit</button> <!-- form tag may be closed here or later --> </form> <p id="submit"></p> <script type="text/javascript" src="../src/index.js"></script>