这个基本的 Javascript 代码有什么问题？ [关闭]答案

【问题标题】：What is wrong with this basic Javascript code? [closed]这个基本的 Javascript 代码有什么问题？ [关闭]
【发布时间】：2017-01-02 00:42:38
【问题描述】：

我正在观看一个关于 javascript 的基本教程系列，并且已经在这个超级简单的脚本上停留了将近 30 分钟。我使用了一个 html 验证器，所有检查都没有错误。但是，代码仍然没有按照视频的方式运行。

当您键入“点击我”时，它应该会显示一个对话框，说“请在框中输入一个真实值”。当您在字段中输入一个值时，它应该用标题替换您输入的任何内容。

抱歉这个简单的问题

再次编辑：谢谢 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>

【问题讨论】：

我建议您编辑您的问题，添加我们可以查看的实际代码。
^^^ 只是想说。你有没有通过 JavaScript 验证器？你把它扔进小提琴了吗？
欢迎来到 SO，请参阅How to Ask 了解如何在 SO 上提问
对于涉及网络语言的东西，我们通常使用JSFiddle 来测试代码，并将小提琴链接到答案中。您还可以通过缩进四个空格或在突出显示代码行后使用 CTRL+K 在问题中发布代码。
MyTitle 与 myTitle 不同，这可能是个问题。

标签： javascript jquery html

【解决方案1】：

我发现您的代码有一些问题，只是每个初学者都会经历的一些简单的事情（我做过），我会把它们删掉：

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

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

【讨论】：

好的，这很完美。我能理解你的意思，不知道为什么教程建议内联代码，如果它不是好的做法。我知道事件侦听器的作用以及它如何引用函数“替代”。我不明白的是，ID'ing“提交”的目的是什么。在 javascript 中，绿色代码充当了一个单词值，对吗？那么身份证有什么作用呢？是不是完全不同，因为我们定义为“替代”的函数似乎是这里调用的函数。
@Aspen ID 只是任意值的字符串（id est 它们可以是您想要的任何值），用于唯一标识元素。 ID 只能在一个元素上使用一次，本身。因此，您可以将 ID 从“提交”更改为任何内容，并且只需更改脚本中的引用，它的工作方式相同。 ID 通常用于引用特定元素，无论是 CSS 还是 JS。在这段代码的情况下，它不会改变任何东西，只是让它可以被document.getElementById("id")引用。
如果您不熟悉 HTML ID 并使用它们，我建议您阅读 this tutorial
内联 JS 在入门教程中很常见，因为它们不需要解释链接脚本、事件侦听器是什么、事件是什么以及所有有趣的东西。但是，如果您尝试将大量冗长的代码放入内联脚本属性中，您就会开始遇到诸如引号工作不正确、未定义的内容等问题。将 HTML、CSS 分开也是非常的好习惯, 和 JS，放到单独的文件中，以使代码更有条理和可读性。在你还在学习的时候养成这样的习惯。

【解决方案2】：

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

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

$(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()
   }
 })
})

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

【讨论】：