按钮单击更改innerHTML

我正在学习Javascript，并且我试图在用户单击按钮时更改“id”的文本。下面的代码：按钮单击更改innerHTML

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<p id="demo">Hello</p> 
 
<button type="button" onclick="document.getElementById("demo").innerHTML = "Hey There"">Try it</button> 
 

 
</body> 
 
</html>

当我选择的按钮，没有任何反应。我做错了什么，我该如何解决？

来源

2015-10-18 Jessica

在Firefox中，右键 - >检查元素显示'<按钮类型= “按钮” 的onclick = “的document.getElementById（” 演示 “）。innerHTML的=” 嘿有“”=“”>尝试一下'。 –

我的答案起初可能看起来很复杂，但我确实认为从一个好的概念开始是健康的，会让事情变得更愉快。学习工具的一个常见问题实际上是他们将自己提升为“快速”学习方式。你可以从他们身上获得一些好处，但是有一些警告。如果跳过太多步骤，学习会更困难。

HTML在设计上用于描述页面的表示，而JavaScript则是用于与该页面交互的设计。

内联JavaScript是一种不好的做法，通常会导致您遇到的问题。这里内联意味着你直接把交互式代码放在HTML演示文稿中。如果你这样做，你很快就会发现这部分HTML变得混乱。然后，由于>,"和'都在相同的地方，所以看起来很难直观地处理分隔符。

内联javascript的另一个问题是它混合了两个概念：交互和表示。 HTML应该只用于演示。

这样一来，你可以编辑代码，使它看起来像这样：

HTML

<!DOCTYPE html> 
<html> 
<body> 

    <p id="demo">Hello</p> 
    <button id="btn" type="button">Try it</button> 

    <script> 
     document.getElementById('btn').onclick = function() { 
      document.getElementById('demo').innerHTML = 'Hey There'; 
     } 
    </script> 
</body> 
</html>

它什么时候该文件加载时，它会以交互方式的操作关联您的按钮，如果在用户的浏览器中启用了JavaScript。如果不是，页面不会失败，它会被降级。在该示例中，演示文稿（html）与交互（脚本）完全分离。作为奖励，没有更多的双引号或单引号。

对于脚本部分，我个人喜欢使用它多一点，所以它更容易使用和阅读。

事情是这样的：

的JavaScript

_e('btn').onclick = function() { 
    _e('demo').innerHTML = 'Hey There'; 
} 

function _e(id) { 
    return document.getElementById(id); 
}

甚至更好：

的JavaScript

_e('btn').addEventListener('click', function() { 
    _e('demo').innerHTML = 'Hey There'; 
}, false); 

function _e(id) { 
    return document.getElementById(id); 
}

的最后一个版本都会电子在你的按钮上当你click时，请明确说明你的意图。这实际上使你很清楚你打算如何处理你的按钮。

我希望这有助于和好运:)

来源

2015-10-18 21:25:41

的问题是，你破坏了，因为引号的字符串：

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<p id="demo">Hello</p> 
 
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hey There'">Try it</button> 
 

 
</body> 
 
</html>

通知我改变了双引号为单引号

来源

2015-10-18 20:58:54 Saar

什么时候你应该使用双引号和单引号？ – Jessica

实际上并不重要，但是当你用任何引号启动一个字符串时，你不能让字符串中的值包含引号，除非你用\或字符串中断来转义。想一想，如果你在那个字符串里面使用'“''，那么一旦你用'''开始了一个字符串，那么你基本上就完成了那个字符串。为了避免它的字符串的内容应该使用不同于引号开始/结束字符串 – Saar

您可以查看[this]（http://stackoverflow.com/questions/242813/when-to-使用双或单引号在JavaScript）问题和答案更多关于单/双引号用法在JavaScript中。这取决于你，他们只是最后的建议。 –

- 您使用双引号里面的双引号。所以它会导致像这样破坏字符串。的onclick = “的document.getElementById（”其第一串等等...

- 或者你可以使用单引号双引号内或双引号单引号内。

这里是工作代码：

第一种方法（使用双引号内的单引号）：

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<p id="demo">Hello</p> 
 
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hey There'">Try it</button> 
 

 
</body> 
 
</html>

第二种方法（使用单引号内双引号）：

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<p id="demo">Hello</p> 
 
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hey There"'>Try it</button> 
 

 
</body> 
 
</html>

关于单引号和双引号的更多信息Read this

来源

2015-10-18 21:04:40 Aviator

JavaScript在单独的函数中执行总是更好。相反，在onclick属性内联JS的，试试这个方法：

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<p id="demo">Hello</p> 
 
<button type="button" onclick="textChange()">Try it</button> 
 

 
    <script> 
 
    var textChange = function() { 
 
     document.getElementById("demo").innerHTML = "Hey There"; 
 
    }; 
 
    </script> 
 
</body> 
 
</html>

这样一来，对一个事实，即你的代码更易于阅读上面，你会避免双引号/单报价问题你有。

来源

2015-10-18 21:05:31

按钮单击更改innerHTML

回答

相关问题