Question

我是JavaScipt的新手，我正在尝试进行小练习来练习这些概念。我在这个非常基本的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上，但它没有帮助。

Answer 1

将onClick更改为onclick：

 button.onclick = function() {

      if(content.className == "") {
            content.className = "open";
        button.innerHTML = "Show Less";  

      } else {
            content.className = ""; 
        button.innerHTML = "Show More";   
      }
    };

Answer 2

您需要将onClick（）更改为onclick（）。您可以在onclick

找到详细信息

Answer 3

@askhan。解决这个问题非常简单。

练习使您成为优秀的开发人员：）

只需在锚标记“a”中添加 onclick 功能

显示更多

我使用了textSwap（）函数名。例如：显示更多

运行下面的代码，你得到输出：

enter code here

<!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" onclick="textSwap();">Show More</a>

<script type="text/javascript">
    var content = document.getElementById("content");
    var button = document.getElementById("show-more");

    function textSwap() {
        if (content.className == "") {
            content.className = "open";
            button.innerHTML = "Show Less";

        } else {
            content.className = "";
            button.innerHTML = "Show More";
        }
    };
</script>
  </body>
</html>

非常基本的Javascript代码没有运行

3 个答案: