1
私はJavaSciptを初めて使いました。私は小さな練習をしてそのコンセプトを実践しようとしています。この非常に基本的なonClickエフェクトに関する問題に直面しています。ボタンをクリックするとテキストが拡大されるはずです。エフェクトは適用されず、コンソールにエラーは表示されません。非常に基本的なJavascriptコードが実行されていません
<!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でそれをリンクしようとしていますが、それは解決しません。