Question

我的javascript有问题。我无法在输入字段中显示结果。请任何人可以帮助我？如果可能的话，最好不要点击按钮来计算结果！感谢。

＆＃13;

<script>
    function cal(){
        
        var bid = document.getElementsByName("bid");
        var result1= bid * 0.1;
        var result2= bid - result1;
        document.getElementsByName("fee").value = result1;
        document.getElementsByName("get").value = result2;

    }
    </script>

＆＃13;

<span style="font-size:20px;">Your bid:</span> <input type="number"    name="bid" class="form-control" style="max-width:250px; margin-top:10px;"> <br>
        <input type="button" onClick="cal();">
        <span style="font-size:20px;" >Our Fee (10%):</span><input type="number" name="fee" readonly class="form-control" style="max-width:250px; margin-top:10px;"><br>
        <span style="font-size:20px;">You'll paid:</span> <input type="number"  name="get" readonly class="form-control" style="max-width:250px; margin-top:10px;">

＆＃13;

Answer 1

Abu Machi。

您正在使用错误的功能进行工作，或者您尚未完全了解其工作原理。正如函数名所示，函数GetElementsByName获取多个元素。所以你需要使用一系列元素，如果是这样的话。

正如您在文档中看到的那样，当您需要使用多个类似元素时，会使用getElementsByName。否则，这项工作的最佳功能是getElementById。（如果你正在使用现代浏览器IE8 +，你可以使用助手querySelector和querySelectorAll）

除了代码中的这个问题外，还有一件事需要纠正。如果采用出价值，您只需获取元素，而不是值本身。

无论如何，让我们来看看你能做些什么。你可以：

Use getElementsByName the "correct" way.

＆＃13;

function cal(){
  var bid = Number(document.getElementsByName("bid")[0].value);
  var result1 = bid * 0.1;
  var result2 = bid - result1;
  document.getElementsByName("fee")[0].value = result1;
  document.getElementsByName("get")[0].value = result2;
}

＆＃13;

<span style="font-size:20px;">Your bid:</span> 
<input type="number" name="bid" class="form-control" style="max-width:250px; margin-top:10px;">
<br>
<input type="button" onclick="cal()">
<span style="font-size:20px;" >Our Fee (10%):</span>
<input type="number" name="fee" readonly class="form-control" style="max-width:250px; margin-top:10px;">
<br>
<span style="font-size:20px;">You'll paid:</span>
<input type="number"  name="get" readonly class="form-control" style="max-width:250px; margin-top:10px;">

＆＃13;

Use getElementById.

＆＃13;

function cal(){
  var bid = Number(document.getElementById("bid").value);
  var result1 = bid * 0.1;
  var result2 = bid - result1;
  document.getElementById("fee").value = result1;
  document.getElementById("get").value = result2;
}

＆＃13;

<span style="font-size:20px;">Your bid:</span> 
<input type="number" id="bid" class="form-control" style="max-width:250px; margin-top:10px;">
<br>
<input type="button" onclick="cal()">
<span style="font-size:20px;" >Our Fee (10%):</span>
<input type="number" id="fee" readonly class="form-control" style="max-width:250px; margin-top:10px;">
<br>
<span style="font-size:20px;">You'll paid:</span>
<input type="number"  id="get" readonly class="form-control" style="max-width:250px; margin-top:10px;">

＆＃13;

Use querySelector.

＆＃13;

function cal(){
  var bid = Number(document.querySelector("#bid").value);
  var result1 = bid * 0.1;
  var result2 = bid - result1;
  document.querySelector("#fee").value = result1;
  document.querySelector("#get").value = result2;
}

＆＃13;

<span style="font-size:20px;">Your bid:</span> 
<input type="number" id="bid" class="form-control" style="max-width:250px; margin-top:10px;">
<br>
<input type="button" onclick="cal()">
<span style="font-size:20px;" >Our Fee (10%):</span>
<input type="number" id="fee" readonly class="form-control" style="max-width:250px; margin-top:10px;">
<br>
<span style="font-size:20px;">You'll paid:</span>
<input type="number"  id="get" readonly class="form-control" style="max-width:250px; margin-top:10px;">

＆＃13;

正如您所问，如果您希望在不需要点击按钮的情况下更改价值，您只需在出价输入中生成onKeyUp事件，like this:

＆＃13;

function cal(){
  var bid = Number(document.querySelector("#bid").value);
  var result1 = bid * 0.1;
  var result2 = bid - result1;
  document.querySelector("#fee").value = result1;
  document.querySelector("#get").value = result2;
}

＆＃13;

<span style="font-size:20px;">Your bid:</span> 
<input type="number" id="bid" class="form-control" style="max-width:250px; margin-top:10px;" onkeyup="cal()">
<br>
<span style="font-size:20px;" >Our Fee (10%):</span>
<input type="number" id="fee" readonly class="form-control" style="max-width:250px; margin-top:10px;">
<br>
<span style="font-size:20px;">You'll paid:</span>
<input type="number"  id="get" readonly class="form-control" style="max-width:250px; margin-top:10px;">

＆＃13;

我希望它可以有所帮助。

Answer 2

只有表单字段元素具有value属性/属性。对于常规元素，您需要.textContent（对于纯文本）或.innerHTML（对于包含HTML的字符串）属性。

接下来，避免使用内联样式，因为它们只会使HTML更难以阅读并导致代码重复。同样，不要使用内联HTML事件属性（onclick）。 many reasons 就是这样。

接下来，不要使用.getElementsByName()，因为这会返回一个＆＃34;实时节点列表＆＃34;，这只适用于少数用例，否则会浪费。提供表单字段，不仅是name属性，还包含（通常）匹配的id属性。

接下来，如果您不希望用户与他们互动（费用和总面积），请不要使用表单元素。

请参阅以下代码中的评论：

＆＃13;

// Get references to the DOM elements you will need just once:
var fee = document.getElementById("fee");
var get = document.getElementById("get");
var bid = document.getElementById("bid")
var btn = document.querySelector("input[type=button]");

// Set up event handling in JavaScript, not HTML:
btn.addEventListener("click", cal);

// You can also have the cal function run as the user enters 
// their bid. No button click needed.
bid.addEventListener("input", cal);

function cal(){
  var result1 = bid.value * 0.1;
  var result2 = bid.value - result1;
  fee.textContent = result1;
  get.textContent = result2;
}

＆＃13;

span {
  font-size:20px;
}

.formField {
   max-width:250px; 
   margin-top:10px;
}

＆＃13;

<span>Your bid:</span>
<input type="number" id="bid" name="bid" class="form-control" class="formField"><br>
<input type="button">
<span>Our Fee (10%):</span>
<span id="fee"></span><br>
<span>You'll paid:</span>
<span id="get"></span>

＆＃13;

Answer 3

您应该使用id代替name来获取javascript中的元素，并将输入字段保存在变量bid中，而不是保存输入字段的值。

<html>

<head>
  <script>
    function cal() {

      var bid = document.getElementById("bid").value;

      var result1 = bid * 0.1;
      var result2 = bid - result1;

      document.getElementById("fee").value = result1;
      document.getElementById("get").value = result2;



    }
  </script>
</head>

<body>
  <span style="font-size:20px;">Your bid:</span> <input type="number" id="bid" class="form-control" style="max-width:250px; margin-top:10px;"> <br>
  <input type="button" onClick="cal();">
  <span style="font-size:20px;">Our Fee (10%):</span><input type="number" id="fee" readonly class="form-control" style="max-width:250px; margin-top:10px;"><br>
  <span style="font-size:20px;">You'll paid:</span> <input type="number" id="get" readonly class="form-control" style="max-width:250px; margin-top:10px;">

</body>

</html>

Answer 4

试一试：

 function cal(){

            var bid = document.querySelector("input[name=bid]");
            var result1= bid * 0.1;
            var result2= bid - result1;
            document.querySelector("input[name=fee]").value = result1;
            document.querySelector("input[name=get]").value = result2;

        }

或

function cal(){

        var bid = document.getElementsByName("bid")[0].value;
        var result1= bid * 0.1;
        var result2= bid - result1;
        document.getElementsByName("fee")[0].value = result1;
        document.getElementsByName("get")[0].value = result2;

    }

或者您可以为所有输入设置ID并使用documment.getElementById 对于更改后的使用功能，您可以使用下一个代码：

var bid = document.getElementsByName("bid")[0];
bid.addEventListener('change',function(){
  cal();
});

Answer 5

getElementsByName为您提供了一系列元素。

将zeroeth元素用于值：

<script>
    function cal(){

        var bid = document.getElementsByName("bid")[0].value;
        var result1= bid * 0.1;
        var result2= bid - result1;
        document.getElementsByName("fee")[0].value = result1;
        document.getElementsByName("get")[0].value = result2;

    }
</script>

编辑 - 无需点击即可在添加输入时更新输入：

onkeyup="cal()"

将结果写入输入字段

5 个答案: