Question

我正在观看关于javascript的基本教程系列，并且已经停留在这个超级简单的脚本上，现在已经接近30分钟了。我使用了一个html验证器，它都检查出没有错误。但是，根据视频，代码仍然没有表现出来。

当您输入＆＃34;点击我＆＃34;它应该显示一个对话框，说“请在框中输入一个真正的值”。当你在字段中输入一个值时，它应该用标题代替你输入的内容。

抱歉这个简单的小说问题

再次编辑：谢谢Arby。这让它发挥作用。

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Example</title>
  <script type="text/javscript">
    function substitute () {
        var myValue = document.getElementById(myTextBox).value;

        if (myValue.length == 0){
          alert('Please enter a real value in the text box!');
          return;
        }
        var myTitle = document.getElementById('title');
        MyTitle.innerHTML = myValue;
    }
  </script>
</head>
<body>
  <h1 id="title">JavaScript Example</h1>

  <input type="text" id="myTextBox" />
  <input type="submit" value="Click Me" onclick="substitute()" />
</body>
</html>

Answer 1

我发现你的代码存在一些问题，只是每个初学者经历过的简单内容（我做过），我会发布它们：

MyTitle不是myTitle，JavaScript变量具有区分性。
你应该远离onclick属性;他的影响很大。内联JS通常不是一个好主意。
所以我添加了一个事件监听器事件：[...].addEventListener("click", callback);
您对输入框的DOM请求使用了未定义的变量/ object / etc.名为myTextBox，而不是字符串"myTextBox"。

无论如何，我为代码创建了一个JSFiddle，所以我可以对它进行测试，所以这里是代码的链接，其中包含我上面解释过的编辑：https://jsfiddle.net/Lktzw0Lh/

Answer 2

稍微不同的方法 - 因为你在标签中列出了jQuery - 我已经重新调整了代码以利用它。我在按钮上放了一个onclick事件处理程序，当点击它时获取文本框的值，如果它是空的 - 给出警报。如果它不为空 - 它会交换输入文本的h1文本并清除文本输入并使其聚焦，以便您可以重新输入新内容。

请注意，click处理程序位于javascript部分，而不是内联js以及jquery - 您可以将影响同一元素的命令链接在一起。

＆＃13;

$(document).ready(function(){
  $('#testButton').click(function(){
   var myValue = $('#myTextBox').val();
   if (myValue == ''){
     alert('Please enter a real value in the text box!');$('#myTextBox').focus()
   }else{
     $('#title').text(myValue);$('#myTextBox').val('').focus()
   }
 })
})

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Example</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
  <h1 id="title">JavaScript Example</h1>

  <input type="text" id="myTextBox" />
 <button id="testButton" type="button">Click Me</button>
</body>
</html>

＆＃13;

这个基本的Javascript代码有什么问题？

2 个答案: