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

-6

我正在看一个关于JavaScript的基本教程系列，并且一直被困在这个超级简单的脚本上，现在已经接近30分钟了。我使用了一个HTML验证器，它全部检出没有错误。但是，代码仍然不能按照视频的方式表现出来。这个基本的Javascript代码有什么问题？

当您键入“点击我”时，它应该显示一个对话框，指出“请在框中输入实际值”。当你在该领域输入一个值时，应该用标题代替你输入的值。

对不起，我简单nooby问题

再次编辑：谢谢阿拜。这让它工作。

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

来源

2017-01-02 Aspen

我建议你修改你的问题，增加实际的代码中，我们可以看一下。 – junkfoodjunkie

^^^只是会说。你有通过* JavaScript *验证器吗？你把它扔到小提琴里了吗？ – arbybruce

欢迎来到SO ,,参见[如何提问]（http://stackoverflow.com/help/how-to-ask）来学习如何提出关于SO –

我发现一些问题与您的代码，只是简单的东西，每一个初学者经历（我做了），我会弹不送：

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

无论如何，我做了一个的jsfiddle的代码，所以我可以测试它，所以这里是链接到与我上面所解释的编辑代码：https://jsfiddle.net/Lktzw0Lh/

来源

2017-01-02 01:11:41 arbybruce

确定这是完美的，我可以理解你说的话，不知道为什么教程提出了内联代码，如果它不是很好的做法，我知道事件监听器做了什么以及它如何引用函数“substitute”。我不明白的是什么目的ID'ing “submit”在JavaScript中，绿色代码是一种单词值类型的权利，那么ID做什么呢？它是完全不同的东西，因为我们定义为“替代”的函数似乎是在这里被调用的东西 – Aspen

@ Aspen ID只是任意值的字符串（* id est *它们可以是任何你想要的），唯一标识该元素.ID只能在一个元素上使用一次，*本身*所以你可以改变ID从“提交”到任何内容，只需更改中的参考该脚本，它的工作原理是一样的。 ID通常用于引用特定元素，无论是在CSS还是JS中。在这个代码的情况下，它不会改变任何东西，除非可以通过'document.getElementById（“id”）''来参考。 – arbybruce

如果您不熟悉HTML ID并使用它们，我推荐阅读[本教程]（http://www.w3schools.com/TAgs/att_id.asp） – arbybruce

一个稍微不同的方式 - 因为你列出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>

来源

2017-01-02 01:21:35 gavgrif

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

回答

相关问题