我是 JavaScript 的新手，我正在尝试做一些小练习来练习这些概念。我在这个非常基本的 onClick 效果上遇到了一个问题:当您单击按钮时，文本应该会展开。效果未应用且控制台未显示任何错误。
这是我的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<link type = "text/css" rel = "stylesheet" href="style.css">
</head>
<body>
<div id="content">
<p>Has autem provincias, quas Orontes ambiens amnis imosque pedes Cassii montis illius celsi praetermeans funditur in Parthenium mare, Gnaeus Pompeius superato Tigrane regnis Armeniorum abstractas dicioni Romanae coniunxit.</p>
<p>Utque aegrum corpus quassari etiam levibus solet offensis, ita animus eius angustus et tener, quicquid increpuisset, ad salutis suae dispendium existimans factum aut cogitatum, insontium caedibus fecit victoriam luctuosam.</p>
<p>Montius nos tumore inusitato quodam et novo ut rebellis et maiestati recalcitrantes Augustae per haec quae strepit incusat iratus nimirum quod contumacem praefectum, quid rerum ordo postulat ignorare dissimulantem formidine tenus iusserim custodiri.</p>
<p>Has autem provincias, quas Orontes ambiens amnis imosque pedes Cassii montis illius celsi praetermeans funditur in Parthenium mare, Gnaeus Pompeius superato Tigrane regnis Armeniorum abstractas dicioni Romanae coniunxit.</p>
<p>Utque aegrum corpus quassari etiam levibus solet offensis, ita animus eius angustus et tener, quicquid increpuisset, ad salutis suae dispendium existimans factum aut cogitatum, insontium caedibus fecit victoriam luctuosam.</p>
<p>Montius nos tumore inusitato quodam et novo ut rebellis et maiestati recalcitrantes Augustae per haec quae strepit incusat iratus nimirum quod contumacem praefectum, quid rerum ordo postulat ignorare dissimulantem formidine tenus iusserim custodiri.</p>
</div>
<a id="show-more">Show More</a>
<script type="text/javascript">
var content = document.getElementById("content");
var button = document.getElementById("show-more");
button.onClick = function() {
if(content.className == "") {
content.className = "open";
button.innerHTML = "Show Less";
} else {
content.className = "";
button.innerHTML = "Show More";
}
};
</script>
</body>
</html>
CSS:
body {
background: #605770;
}
#content {
width: 400px;
max-height: 270px;
background: #EDCB96;
margin: 15px auto;
padding: 0 10px 10px;
font-family: sans-serif;
font-size: 12px;
color: black;
overflow: hidden;
-webkit-transition: max-height 0.7s;
-moz-transition: max-height 0.7s;
transition: max-height 0.7s;
}
#content.open {
max-height: 1000px;
-webkit-transition: max-height 0.7s;
-moz-transition: max-height 0.7s;
transition: max-height 0.7s;
}
#show-more {
width: 90px;
height: 20px;
text-transform: uppercase;
font-family: sans-serif;
font-size: 12px;
font-weight: bold;
color: #605770;
background: #EDCB96;
border: 1px solid #F7C4A5;
margin: 15px auto;
display: block;
text-align: center;
padding: 2px 5px;
cursor: pointer;
}
我也曾尝试将我的 JavaScript 放在一个单独的文件中并将其链接到 HTML 上，但它没有帮助。
最佳答案
将 onClick 更改为 onclick:
button.onclick = function() {
if(content.className == "") {
content.className = "open";
button.innerHTML = "Show Less";
} else {
content.className = "";
button.innerHTML = "Show More";
}
};
关于javascript - 非常基本的 Javascript 代码无法运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39186535/