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

试试这个......

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我想，你使用双引号（＆＃34;），使用双引号（＆＃34;）。因此，请在单引号（＆＃39;）内更改双引号或在双引号内引用单引号（＆＃34;）。 更多按钮默认类型为提交 ...

更改

<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...";
}

＆＃13;

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

＆＃13;

Answer 3

与之前的回答一样，您需要使用单引号＆＃39; number＆＃39;。另外，你需要在index.js中的myFunction（val）中添加参数val。

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

Answer 4

奇怪的是，没有一个答案建议将HTML和JavaScript分开，这就是我要做的事情。它被认为是不在HTML中内联JS的最佳实践。

＆＃13;

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

＆＃13;

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

＆＃13;

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>

将HTML值传递给JavaScript函数

5 个答案: