document.getElementById（）の値。

私はJSには新しく、入力を受け取り、関連する出力を生成する非常に単純なプログラムを作成しようとしています。しかし、私は間違ったことをしている、それは動作していない。ここに私のコードです。document.getElementById（）の値。

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

      } 
     }

出典

2016-12-22 Connor

を私は他の回答が指摘した問題に同意します。あなたのHTMLにonclickタグを設定するのではなく、JavaScriptにaddEventListenerを使用することをお勧めします。

私が助けてくれれば、以下のコードを再構築しました。

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>

出典

2016-12-22 15:54:08

うわー、私の答え:)コナー部から、その不公平が最初だったし、それは動作しますが、説明し、すべてのもの。犯罪はありませんspencer.sm – Ionut

@Ionut +1しかし、誰のためのものではなく、コンテンツの質のためです。 – zer00ne

@ zer00ne、ありがとう。私は感謝のためにうれしいです。私はあなたの答えにあなたと同様に努力しなければなりませんでした。 – Ionut

あなたはまた、入力/ボタン属性の後に;があってはならない、window.onload = function() {にwindow.onload = function {を変更する、のonload関数から()が欠落しているの文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。

そしてfinnally、また、出力用innerHTMLで.valueを変更：

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>

出典

2016-12-22 15:27:35 Ionut

ように多くの間違いがありました、私はCSSボックス内のすべての修正を置きます。リストアイテムの各番号は、ソース内の場所に対応します。

SNIPPET

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

出典

2016-12-22 17:07:45 zer00ne

document.getElementById（）の値。

答えて

関連する問題