Question

我遇到了问题。＆＃34;显示更多＆＃34;旁边有一个图标。按下它时会消失，因为innerText被覆盖所以我尝试了这个

document.getElementById("toggleButtonPersonal").buttonText.innerHTML = "Show Less <i class="fas fa-caret-up"></i>";

添加此项后，单击该按钮时不会发生任何事情。

＆＃13;

var status = "less";

function toggleText()


{
    
    if (status == "less") {
        document.getElementById("textArea").style.display = "block";
        document.getElementById("toggleButton").innerText = "Show Less";
        status = "more";
    } else if (status == "more") {
        document.getElementById("textArea").style.display = "none";
        document.getElementById("toggleButton").innerText = "Show More";
        status = "less"
    }
	
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<body>

<div id="textArea" style="display: none;">
    test
</div>

<button type="button" id="toggleButton" onclick="toggleText();" href="javascript:void(0);">Show More <i class="fas fa-caret-down"></i></button>

<div id="textArea" style="display: none;"> 

</div
</body>

＆＃13;

Answer 1

如果你依赖HTML和CSS而不是JavaScript，你只需在容器中添加一个类即可。

这样，您可以更改按钮的状态，而不是替换其innerHTML。

const containerElement = document.getElementById("container");

function toggleText() {

  if (containerElement.classList.contains('less-mode')) {
    containerElement.classList.remove('less-mode');
  } else {
    containerElement.classList.add('less-mode');
  }
}

.more-btn .less {
  display: none;
}

.more-btn .more {
  display: inline;
}

#textArea {
  display: none;
}

.container.less-mode #textArea {
  display: block;
}

.container.less-mode .more-btn .less {
  display: inline;
}

.container.less-mode .more-btn .more {
  display: none;
}

<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

<div class="container" id="container">
  <button type="button" id="toggleButton" class="more-btn" onclick="toggleText();" href="javascript:void(0);">
    <span class="more">
    See More
    <i class="fas fa-caret-down"></i>
    </span>
    <span class="less">
    See Less
    <i class="fas fa-caret-up"></i>
    </span>
    
  </button>
  <div id="textArea">TEST</div>
</div>

Answer 2

你这里有一个错字

"Show Less <i class="fas fa-caret-up"></i>";

将类周围的引号更改为单引号，例如

"Show Less <i class='fas fa-caret-up'></i>";

var status = "less";

function toggleText()


{
    
    if (status == "less") {
        document.getElementById("textArea").style.display = "block";
      document.getElementById("toggleButton").innerHTML = "Show Less <i class='fas fa-caret-up'></i>";
        status = "more";
    } else if (status == "more") {
        document.getElementById("textArea").style.display = "none";
       document.getElementById("toggleButton").innerHTML = "Show More <i class='fas fa-caret-down'></i>";

        status = "less"
    }
	
}

<!DOCTYPE html>
<html>
<head>
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<body>

<div id="textArea" style="display: none;">
    test
</div>

<button type="button" id="toggleButton" onclick="toggleText();" href="javascript:void(0);">Show More <i class="fas fa-caret-down"></i></button>

<div id="textArea" style="display: none;"> 

</div
</body>

JS / HTML ButtonText.InnerHTML没有响应

2 个答案: