Question

我有一个问题，关于如何在按下按钮时看到以下代码中的响应。

首先，让我说我是Javascript的新手，在等待我教授的回复之间。我研究了w3schools，使用w3schools关键字搜索栏分解了Javascript中的一些不同的关键字和元素，并且对我所具体的问题进行了简要介绍。我还上传到w3c validator.org并没有太多解释。然后我尝试在我的网络浏览器中使用检查选项。我在那里发现了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>

Answer 1

首先为什么有两个具有相同功能collectInput的脚本，其次删除一个语法错误，已在下面的代码片段中解析了它。

＆＃13;

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

＆＃13;

Answer 2

您的代码错误很少，但编辑后效果很好。

第一个错误是两次调用相同的函数collectInput()。

第二个错误是id名称应该在单引号内而不是你写的方式

document.getElementById('textbox'1);

应该是

document.getElementById('textbox1');

另一个错误是单行语句的突破

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

应该是

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

以下是正确的代码。希望能帮助到你。

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

Answer 3

这是工作代码：

`<!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>

Answer 4

首先，非常感谢你回复我。有趣的是，当我提交帖子时，我不知道回复是什么，因为发布部分说了一些让我认为我的问题可能得不到回答的问题。所以，希望我可以提出很多问题并在编码过程中多年来获得很多知识。以下是从您的所有回复中获得的代码。

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

按钮不触发响应

4 个答案: