javascript - 按钮未触发响应

标签 javascript jquery html

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

首先,我想说我是 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>    

最佳答案

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

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

关于javascript - 按钮未触发响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41822155/

相关文章:

javascript - 在没有 jquery 的纯 javascript 中淡入淡出

html - 如何为ie8的标签设置边框?

CSS grid-template-columns 的行为方式与我不同

javascript - 如何更改 Facebook 点赞按钮的尺寸?

javascript - 使用 $.each 和 setInterval 循环播放连续动画?

javascript - 如何使用我可以推送到的方法和数组制作 Javascript 类?

javascript - 使用 javascript 更改 html 元素的 css - 'Uncaught TypeError: Cannot read property ' className' of null'

javascript - 做一个动态/掩码变量?

php - 如何使用日期选择器的值选择数据库中的数据?

javascript - 使用 Jquery,如何查找属性百分比的像素值并将其添加到不同的属性?