无法点击以显示更多文本

Question

我是编程新手，想制作一个按钮来显示更多内容。但是，是的，无论我做什么，按钮都不起作用。我做了一个块，如果这里不清楚，它应该下拉以显示更多文本。能帮到一个新手，再三道谢。

这里是Javascript

function hejhej()
    var x = document.getElementById("button-area").href;
    document.getElementById("show-more").InnerHTML = x;

    button.onclick = function() {
        if(content.className =="open")
        //shrink the box
        content.ClassName = "";
        button.innerHTML = "Show More"

    } else{
        //Expand the box
        content.ClassName = "open";
        button.innerHTML = "Show Less"
     
    }

和 CSS 下拉文本

  .show-more {
      font-family: calibri;
      text-align: center;
      background-color: #1594e5;
      color: #fff;
      width: 100px;
      height: 50px;
      font-size: 24px;
      border-color: #1594e5;
      text-transform: uppercase;
      cursor: pointer;
      position: relative;
  }
  .button-area {
      width: 527px;
      height: 100px;
      background-color: #1e1e1e;
      color: #E7E1D1;
      margin: 0px;
      margin-top: -4px;
      position: relative;

      max-height: 100px;
      overflow: hidden;

      /* Till övergångar. */
      -webkit-transition: max-height 0.7s;
      -moz-transition: max-height 0.7s;
      transition: max-height 0.7s;

  }
  #button-area.open {
      max-height: 400px;

      /* Till övgergångar neråt */
      -webkit-transition: max-height 0.7s;
      -moz-transition: max-height 0.7s;
      transition: max-height 0.7s;
  }

如果是任何用途，正常的HTML代码

<div class="button-area">    
    Test test very much test as i said i tested the test
</div>

<button onclick="hejhej()" class="show-more">Tryck</button>
<script src="src/js/ExtremtJava.js"></script>

Answer 1

希望这能让您入门。我评论的主要是我对您的代码所做的更改，但您主要有大量语法错误。

// Fixed a ton of syntax errors. Closed functions properly and removed excess 
//brackets/code

function hejhej() {
   var buttonArea = document.getElementById( 'button-area' );
   if (
      buttonArea.classList.contains( 'open' ) 
    ) {
      //shrink the box
      buttonArea.innerHTML = "Show More";
      buttonArea.classList.remove( "open" );      
    }
   else {
      //Expand the box
      buttonArea.innerHTML = "Show Less";
      buttonArea.classList.add( "open" );      
  }
 }

.show-more {
  font-family: calibri;
  text-align: center;
  background-color: #1594e5;
  color: #fff;
  width: 100px;
  height: 50px;
  font-size: 24px;
  border-color: #1594e5;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
}
.button-area {
  width: 527px;
  height: 100px;
  background-color: #1e1e1e;
  color: #E7E1D1;
  margin: 0px;
  margin-top: -4px;
  position: relative;
  max-height: 100px;
  overflow: hidden;

  /* Till övergångar. */
  -webkit-transition: max-height, height: 0.7s;
  -moz-transition: max-height, height: 0.7s;
  transition: max-height, height 0.7s;  
}
.open {
  height: 150px;
  max-height: 150px;
}

<div class="button-area" id="button-area">    <!-- added missing id -->
    Test test very much test as i said i tested the test
</div>

<button onclick="hejhej()" class="show-more">Tryck</button>

在评论中回答您的问题：“显示更多”和“显示更少”替换您的原始文本的原因是因为您正在更改该元素的 innerHTML。删除这些代码行，您的原始文本将保留。见下文：

// Fixed a ton of syntax errors. Closed functions properly and removed excess 
//brackets/code

function hejhej() {
   var buttonArea = document.getElementById( 'button-area' );
   if (
      buttonArea.classList.contains( 'open' ) 
    ) {
      //shrink the box
      buttonArea.classList.remove( "open" );      
    }
   else {
      //Expand the box
      buttonArea.classList.add( "open" );      
  }
 }

.show-more {
  font-family: calibri;
  text-align: center;
  background-color: #1594e5;
  color: #fff;
  width: 100px;
  height: 50px;
  font-size: 24px;
  border-color: #1594e5;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
}
.button-area {
  width: 527px;
  height: 100px;
  background-color: #1e1e1e;
  color: #E7E1D1;
  margin: 0px;
  margin-top: -4px;
  position: relative;
  max-height: 100px;
  overflow: hidden;

  /* Till övergångar. */
  -webkit-transition: max-height, height: 0.7s;
  -moz-transition: max-height, height: 0.7s;
  transition: max-height, height 0.7s;  
}
.open {
  height: 150px;
  max-height: 150px;
}

<div class="button-area" id="button-area">    <!-- added missing id -->
    Test test very much test as i said i tested the test
</div>

<button onclick="hejhej()" class="show-more">Tryck</button>

无法点击以显示更多文本

Can't get onclick to show more text

javascript

onclick