Question

我刚刚开始使用JavaScript，这似乎是一个初学者的问题。我正在尝试制作一个网页，用户可以在其中输入数字并将其平方。我已经能够编写以下代码，显示带有提示和输入字段，开始计算的按钮以及答案区域的页面：

public class TopsCollection { 

private static Map<String, Integer> collectors = new HashMap<>();

public TopsCollection() {
}

public void add(String playerName, int score) {
    collectors.put(playerName, score);
}

public void clearCollectors() {
    synchronized (collectors) {
        collectors.clear();
    }
}

public List<Map.Entry<String, Integer>> getTops() {
    return collectors.entrySet().stream().sorted(comparing(Map.Entry::getValue, reverseOrder())).limit(5).collect(toList());
}

public int getTopByName(String name) {
    for (int i = 0; i < getTops().size(); i++) {
        if (getTops().get(i).getKey().contains(name)) {
            return i;
        }
    }
    return 0;
}

但是，单击按钮时没有任何响应。问题在哪里，如何解决。感谢您的帮助。

Answer 1

此行中的三件事

document.getElementsByName("SNUM")[0].value;

由于getElementsByName提供了集合，因此您需要使用索引来获取元素。其次，您需要获取值，因此请使用value，其次，您的代码中会有一个错字

function calculate() {
  alert("In calculate fn") // NOT REACHING HERE; 
  var x = document.getElementsByName("SNUM")[0].value;
  document.getElementById("answer_area").innerHTML = x * x;
}

<form>
  <table cellspacing="2" cellpadding="2" border="1">
    <tr>
      <td align="right">Enter a number: </td>
      <td><input type="text" name="SNUM" /></td>
    </tr>
  </table>
</form>
<br>
<button onclick="calculate()">Square it</button>

<b><u><br><br>Answer:</u></b>
<p id="answer_area"></p>
<!-- answer to be placed here; -->

Answer 2

1）在getElement s ByName中使用未命中s。

2）getElementsByName方法返回元素的NodeList集合，因此请首先使用[0]。

3）要获取值，请使用“值”属性。

因此更改：

var x = document.getElementByName("SNUM");

收件人：

var x = document.getElementsByName("SNUM")[0].value;

function calculate(){
  alert("In calculate fn")    // NOT REACHING HERE; 
  var x = document.getElementsByName("SNUM")[0].value;
  document.getElementById("answer_area").innerHTML = x * x;
}

<form>
  <table cellspacing = "2" cellpadding = "2" border = "1">
    <tr>
      <td align = "right">Enter a number: </td>
      <td><input type = "text" name = "SNUM" /></td>
    </tr>
  </table>
</form>      
<br>
<button onclick="calculate()">Square it</button>
<b><u><br><br>Answer:</b></u>
<p id="answer_area"></p>  <!-- answer to be placed here; -->

Answer 3

简单，问题出在这里：

 var x = document.getElementByName("SNUM");

没有称为getElementByName的方法，而是：

getElementsByName("SNUM")

将代码更改为：

<html>   
<head>
      <script>
        function calculate(){
            alert("In calculate fn")    // NOT REACHING HERE; 
            var x = document.getElementsByName("SNUM")[0].value;
            document.getElementById("answer_area").innerHTML = x * x;
        }
      </script>      
</head> 
<body>
      <form>
         <table cellspacing = "2" cellpadding = "2" border = "1">
            <tr>
               <td align = "right">Enter a number: </td>
               <td><input type = "text" name = "SNUM" /></td>
            </tr>
         </table>
      </form>      
    <br>
      <button onclick="calculate()">Square it</button>

     <b><u><br><br>Answer:</b></u>
     <p id="answer_area"></p>  <!-- answer to be placed here; -->

</body>
</html>

无法读取JavaScript中输入的号码

3 个答案: