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函数中丢失select A.* from A join B on within(B.wkt,A.geom);，将()更改为window.onload = function {，输入/按钮属性后也不应该window.onload = function() {，另一个错误是{在if语句;应为;之后{1}}，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

Answer 2

出现了很多错误，我将所有更正都放在了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>

Answer 3

我同意其他答案指出的问题。我还建议您在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>

document.getElementById（）。value的困难

3 个答案: