2017-01-24 8 views
0

ボタンを押したときに次のコードで応答を表示する方法について質問があります。ボタンが応答をトリガーしない

まずは、私はJavascriptを初めて、教授からの返事を待っていると言いましょう。私はw3schoolsのキーワード検索バーを使用してJavaScriptでいくつかの異なるキーワードと要素を分解してw3schoolsを調べ、私が持っている特定の質問については不足していました。私はw3c validator.orgにもアップロードしましたが、解釈することはあまりありませんでした。私はその後、私のWebブラウザで検査オプションを使用してみました。私はそこに18のエラーを見つけましたが、実際にそれらを理解していませんでした。 5つの異なるブラウザでコードを表示しようとしましたが、ボタンを押すと何も起こりません。何か案は?私の推測では、構文領域のいくつかのタイプですが、私はまだ私が探しているものはわかりません。どんな助けもありがとう!ありがとう。

function collectInput() { 
 
      var textbox1 = 
 
     document.getElementById('textbox'1); 
 
       // compare the value in the textbox to an empty string 
 
       if(textbox1.value == "") { 
 
         // if true, send the error message to the display point 
 
       document.getElementById('response').innerHTML 
 
      = "Hey, you didn't put anything in the box!?!";  
 
       }; 
 
     }; 
 

 
function collectInput() { 
 
     var textbox1 = 
 
    document.getElementById('textbox1'); 
 
     if(textbox1.value == "") { 
 
     document.getElementById('response').innerHTML 
 
    = "Hey, you didn't put anything in the box!?!"; 
 
     } else { 
 
      
 
    document.getElementById('response').innerHTML = "You 
 
    entered: "+ textbox1.value;    
 
      }; 
 
     };
<body> 
 
    <div class="wrapper"> 
 
    <header><h1>Header</h1></header> 
 
     <section><h1>Section</h1> 
 
    
 
     <input type="text" id="textbox1"> 
 
     <input type="button" id="theButton" value="Send to the Script!" onclick="collectInput()"> 
 

 
     <p id="response"></p><!-- the display point, the place to send the response message --> 
 
    
 
     </section>  
 
    </div>  
 
</body> 
 
<footer> 
 
    <p class="copy">Copyright (c) 2014 All Rights Reserved</p>  
 
</footer>

+1

あなたは同じ名前の2つの機能を持っていたときに最初のものは無視されるように、ロードされた最後のものは、以前に置き換えられます。 – Bindrid

答えて

1

2つのスクリプトがcollectInputは、第二に1を削除し、同じ機能である理由をまず下記で解決された構文エラーがあり、それを見てみましょうスニペット。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>| HTML5 CSS |</title> 
 
    <meta charset="UTF-8"> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
<!-- There was two pieces to the instructions. The second is below, but I'm unsure as to whether the funtion requires a second script or not. Both returned negative attempts. The instructions are supposed to create a page that shows one response or the other. --> 
 
    <script type="text/javascript"> 
 
     function collectInput() { 
 
     var textbox1 = 
 
    document.getElementById('textbox1'); 
 
     if(textbox1.value == "") { 
 
     document.getElementById('response').innerHTML 
 
    = "Hey, you didn't put anything in the box!?!"; 
 
     } else { 
 
      
 
    document.getElementById('response').innerHTML = "You entered: "+ textbox1.value;    
 
      } 
 
     } 
 
    </script>  
 
    </head> 
 
<body> 
 
    <div class="wrapper"> 
 
    <header><h1>Header</h1></header> 
 
     <section><h1>Section</h1> 
 
    
 
     <input type="text" id="textbox1"> 
 
     <input type="button" id="theButton" value="Send to the Script!" onclick="collectInput()"> 
 

 
     <p id="response"></p><!-- the display point, the place to send the response message --> 
 
    
 
     </section>  
 
    </div>  
 
</body> 
 
<footer> 
 
    <p class="copy">Copyright (c) 2014 All Rights Reserved</p>  
 
</footer>  
 
</html>

1

あなたのコードいくつかのエラーがあったが、編集後にそれが正常に動作します。

最初のエラーは同じ関数collectInput()を2回呼び出していました。

2番目のエラーはid名前は単一引用符の内側には、別のエラーが単一のステートメント

のためのラインを破った

document.getElementById('textbox1'); 

する必要がありますあなたが

document.getElementById('textbox'1); 

を書かれていない方法であるべきです
document.getElementById('response').innerHTML = "You 
    entered: "+ textbox1.value; 

document.getElementById('response').innerHTML = "You entered: "+ textbox1.value; 

以下は正しいコードです。それが役に立てば幸い。 HERE

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>| HTML5 CSS |</title> 
 
    <meta charset="UTF-8"> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
    
 
<!-- There was two pieces to the instructions. The second is below, but I'm unsure as to whether the funtion requires a second script or not. Both returned negative attempts. The instructions are supposed to create a page that shows one response or the other. --> 
 
    <script type="text/javascript"> 
 
     function collectInput() { 
 
     var textbox1 = 
 
    document.getElementById('textbox1'); 
 
     if(textbox1.value == "") { 
 
     document.getElementById('response').innerHTML 
 
    = "Hey, you didn't put anything in the box!?!"; 
 
     } if(textbox1.value != "") { 
 
      
 
    document.getElementById('response').innerHTML = "You entered: "+ textbox1.value;    
 
      } 
 
     } 
 
    </script>  
 
    </head> 
 
<body> 
 
    <div class="wrapper"> 
 
    <header><h1>Header</h1></header> 
 
     <section><h1>Section</h1> 
 
    
 
     <input type="text" id="textbox1"> 
 
     <input type="button" id="theButton" value="Send to the Script!" onclick="collectInput()"> 
 

 
     <p id="response"></p><!-- the display point, the place to send the response message --> 
 
    
 
     </section>  
 
    </div>  
 
</body> 
 
<footer> 
 
    <p class="copy">Copyright (c) 2014 All Rights Reserved</p>  
 
</footer>  
 
</html>

+0

ここでエラーを説明してください – kritikaTalwar

0

WORKINGコードです:まず

`<!DOCTYPE html>`<BR> 
`<html>`<BR> 
`<head>`<BR> 
    `<title>| HTML5 CSS |</title> `<BR> 
    `<meta charset="UTF-8">`<BR> 
    `<link rel="stylesheet" type="text/css" href="style.css">`<BR> 
    `<script type="text/javascript">`<BR> 
    ` function collectInput() {`<BR> 
     ` var textbox1 =document.getElementById('textbox1');`<BR> 
     `   // compare the value in the textbox to an empty string`<BR> 
     `   if(textbox1.value == "") {`<BR> 
     `    // if true, send the error message to the display point`<BR> 
`    document.getElementById('response').innerHTML= "Hey, you didn't put anything in the box!?!";`<BR> 
      `  }`<BR> 
     `}`<BR> 
     `</script> `<BR> 
` <!-- There was two pieces to the instructions. The second is below, but I'm unsure as to whether the funtion requires a second script or not. Both returned negative attempts. The instructions are supposed to create a page that shows one response or the other. -->` <BR> 
`  <script type="text/javascript">`<BR> 
`  function collectInput() {`<BR> 
    `  var textbox1 =`<BR> 
    ` document.getElementById('textbox1');`<BR> 
    ` if(textbox1.value == "") {`<BR> 
    ` document.getElementById('response').innerHTML= "Hey, you didn't put anything in the box!?!";` 
     ` } else {` <BR> 
      `document.getElementById('response').innerHTML = "You entered: "+ textbox1.value;`<BR>    
     ` }`<BR> 
    ` } `<BR> 
    `</script>` <BR> 
    `</head>`<BR> 
`<body>`<BR> 
` <div class="wrapper">`<BR> 
    ` <header><h1>Header</h1></header>` <BR> 
     `<section><h1>Section</h1>`<BR> 
      `<input type="text" id="textbox1">`<BR> 
     `<input type="button" id="theButton" value="Send to the Script!" onclick="collectInput()">`<BR> 

    `  <p id="response"></p><!-- the display point, the place to send the response message -->`<BR> 

    ` </section>` <BR> 
    `</div>` <BR> 
`</body>`<BR> 
`<footer>`<BR> 
` <p class="copy">Copyright (c) 2014 All Rights Reserved</p> `<BR> 
`</footer>` <BR> 
`</html>`<BR> 
+0

変更した内容を説明してください。 – kritikaTalwar

0

、私に戻って取得するためにありがとうございました。私がスレッドを提出したときの返答がわからないというのは面白かった。なぜなら、投稿セクションは、私の質問に答えられない可能性があると思う程度に何かを言ったからだ。だから、うまくいけば、私は多くの質問をし、私のコーディングの旅で長年にわたって多くの知識を得ることができます。以下は、すべての回答から得られたコードです。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>| HTML5 CSS |</title> 
 
<meta charset="UTF-8"> 
 
<link rel="stylesheet" type="text/css" href="style.css"> 
 
<script type="text/javascript"> 
 
function collectInput() { 
 
    var textbox1 = 
 
document.getElementById('textbox1'); 
 
       // compare the value in the textbox to an empty string 
 
       if(textbox1.value == "") { 
 
         // if true, send the error message to the display point 
 
       document.getElementById('response').innerHTML 
 
      = "Hey, you didn't put anything in the box!?!";  
 
       } else { 
 
      
 
document.getElementById('response').innerHTML = "You entered: "+ textbox1.value; 
 
     } 
 
} 
 
</script> 
 
    
 
</head> 
 
<body> 
 
<div class="wrapper"> 
 
<header><h1>Header</h1></header> 
 
<section><h1>Section</h1> 
 
    
 
<input type="text" id="textbox1"> 
 
<input type="button" id="theButton" value="Send to the Script!" onclick="collectInput()"> 
 

 
<p id="response"></p><!-- the display point, the place to send the response message --> 
 
    
 
</section>  
 
</div>  
 
</body> 
 
<footer> 
 
<p class="copy">Copyright (c) 2014 All Rights Reserved</p>  
 
</footer>  
 
</html>

関連する問題