document.getElementById().value 的问题

Question

我是 JS 的新手，我正在尝试制作一个非常简单的程序，它将接受输入并产生相关的输出。但是，我做错了什么，因为它不起作用。这是我的代码。

<html>
<head>
    <title>Test</title>
    <h1>Test</h1>
</head>
<body>
    <p>Please type your input into the box below.</p>
    <input type="number"; id="input">
    <button type="submit"; onclick="Output()">Submit</button>
    <pre id="OutputHere">Type an input first!</pre>
    <script type="text/javascript">
        window.onload = function {
            if(document.getElementById("input").boolValue != null); {
                Output();
            }
        }
         function Output() {
            var input = document.getElementById("input").value
            switch(input) {
                case 1:
                    document.getElementById("OutputHere").value="4"
                case 2: 
                     document.getElementById("OutputHere").value="9"

            }
        }

Answer 1

你的onload函数缺少()，把window.onload = function {改成window.onload = function() {，input/button属性后面也不应该有;，另一个错误是if语句if (document.getElementById("input").boolValue != null); {之后的;应该是if (document.getElementById("input").boolValue != null) {，也没有boolVal只是value。将case 1、case 2更改为case "1"、case "2"，因为输入返回值为字符串。

我建议您真正检查控制台错误以查看这些类型的语法错误。

您还可以使用 addEventListener("click", yourFunction); 代替不再使用的已弃用 onclick。

最后，也将 .value 更改为 innerHTML 输出：

window.onload = function() {
  if (document.getElementById("input").value != null) {
    Output();
  }
};

function Output() {
  var input = document.getElementById("input").value;
  switch (input) {
    case "1":
      document.getElementById("OutputHere").innerHTML= "4";
      break;
    case "2":
      document.getElementById("OutputHere").innerHTML= "9";
      break;
  }
}

<p>Please type your input into the box below.</p>
<input type="number" id="input">
<button type="submit" onclick="Output()">Submit</button>
<pre id="OutputHere">Type an input first!</pre>

Answer 2

同意其他回答指出的问题。我还建议在 JavaScript 中使用 addEventListener 而不是在 HTML.

中设置 onclick 标签

如果有帮助，我已经在下面对您的代码进行了一些重构。

var button = document.getElementById('submit');
var input = document.getElementById('input');

button.addEventListener("click", Output);

function Output() {
  var value = document.getElementById("input").value;
  var pre = document.getElementById("OutputHere");

  switch(value){
    case "1":
      pre.innerText = "4";
      break;
    case "2":
      pre.innerText = "9";
      break;
    default:
      pre.innerText = "Default text";
      break;
  }
}

<p>Please type your input into the box below.</p>
<input type="number" id="input">
<button id="submit">Submit</button>
<pre id="OutputHere">Type an input first!</pre>

Answer 3

错误太多，我把所有更正都放在了CSS框中。列表项的每个编号对应于源中的位置。

片段

/* 4 */
function out() {
  var input = document.getElementById("input").value
  var output = document.getElementById('output'); //5

  switch (input) {
    case '1': // 6
      output.value = "4";
      break; // 7
    case '2': // 6
      output.value = "9";
      break; // 7
    default: // 8
      output.value = 'Enter 1 or 2';
      break;

  }
}

/*
1. Added max and min attributes since you are expecting a very limited range of input.
2. Removed the type='submit' which by default will gather all data from a <form>'s form elements with a name and then post(or get) to a server. Obviously you do not meet the requirements nor do you need it.
3. Changed <pre> to <output>. Not only is this element a semantically sound choice, it also accepts and displays values derived from the .value property and .textContent or .innerHTML (there's more properties that can be used, but those are the 3 major ones).
4. Removed window.onload event. In this case, it doesn't matter since loading is not crucial in such a simple design. Removed the validation because by using an input type='number' letters cannot be entered, and it should be in the function. BTW, I don't think there's a .boolValue property in JS.
5. Store the value of output in a variable to save you from carpal tunnel syndrome.
6. All element data is text even if it's 0 to 9. If you want them to be numbers (which you don't in this case), use Number(), parseInt(), or parseFloat() to convert a text string to number data. Since we haven't converted the strings to numbers we must wrap each value in quotes.
7. In switch() add break; at the end of each case statement. Without break; the input will go on to the next case, resulting in unexpected results.
8. The last case statement should be default:. Here you can enter a function/expression that applies to anything that is not 1 or 2. Using the default: this way functions as a validator/filter.
*/

<!doctype html>
<html>

<head>
  <title>Test</title>
  <h1>Test</h1>
</head>

<body>
  <p>Please type your input into the box below.</p>
  <!--1-->
  <input type="number" id="input" max='2' min='1'>
  <!--2-->
  <button onclick="out()">Submit</button>
  <!--3-->
  <output id="output"></output>

</body>

</html>

document.getElementById().value 的问题

Difficulties with document.getElementById().value

html

javascript

getelementbyid