更改一个按钮的状态HTML

-1

我在我的HTML正文中有这样的代码，它充当一个显示/隐藏按钮，它通过CSS进行了样式化。不过，我只能选择标题按钮一次，即“阅读更多..”，但在选择按钮后，我希望它更改为“更少阅读”。以下是我正在使用的代码：更改一个按钮的状态HTML

<button title="Click to show/hide content" type="button" 
    onclick="if(document.getElementById('spoiler') .style.display=='none')   
    {document.getElementById('spoiler') 
    .style.display=''}else{document.getElementById('spoiler') 
    .style.display='none'}">Read more... 
</button>

任何帮助将不胜感激，谢谢提前

来源

2014-03-19 user3437161

你的代码在哪里..？ – shubhraj

你试图显示和隐藏每次点击一个按钮？ – Abhishek

哇，你应该把这个JavaScript里面的函数，而不是直接在onclick事件。 – FabioG

尝试：

HTML：

<button title="Click to show/hide content" type="button" onclick="func()" id="but">Read more...</button> 
<div id="spoiler" style="display:none">TEXT TEXT TEXT</div>

JS：

function func(){ 

      if(document.getElementById('spoiler') .style.display=="none"){ 
      document.getElementById('spoiler').style.display="block"; 
      document.getElementById('but').innerHTML="Read less..."; 
      } 
      else{ 
      document.getElementById('spoiler').style.display='none'; 
      document.getElementById('but').innerHTML="Read more..."; 
      } 
      }

DEMO

来源

2014-03-19 10:56:58 laaposto

首先，走出内嵌捆绑JavaScript作为HTML属性的习惯。从你的JS脚本中集中查看DOM脚本，而不是在你的HTML中。

你需要做的事情的本质是在每次点击按钮时查询一些东西，并相应地采取行动。例如，扰流区域的可见性。

（请注意，你需要给你的按钮的ID，例如mybutton，这个:)

document.querySelector('#mybutton').addEventListener('click', function() { 
    var 
    spoiler = document.querySelector('#spoiler'), 
    showing = spoiler.style.display != 'none'; 
    spoiler.style.display = showing ? 'none' : 'block'; 
    this.textContent = 'Read '+(showing ? 'more' : 'less'); 
}, false);

于是就点击，我们询问display风格#spoiler。如果它正在显示，我们会隐藏它，如果它隐藏，我们会显示它，并相应地更新按钮文本。

来源

2014-03-19 10:59:20 Utkanos

你错过了一个加号（'+'）：''Read'+（显示？'more'：'less'）'，很好的答案。 –

谢谢，和好的地方。编辑。 – Utkanos

HTML：

<button id="btn" title="Click to show/hide content" type="button" onclick="readmore()">Read More...</button> 
<div id="spoiler" style="display:none">spoiler text</div>

JS：

function readmore(){ 
    var btn = document.getElementById('btn'); 
    var spoiler = document.getElementById('spoiler'); 

    if(spoiler.style.display=='none') { 
     spoiler.style.display = ''; 
     btn.innerHTML = "Read Less ..."; 
    } else { 
     spoiler.style.display = 'none'; 
     btn.innerHTML = "Read More ..."; 
    } 
}

这里是一个DEMO at jsFiddle。

来源

2014-03-19 11:01:29

更改一个按钮的状态HTML

回答

相关问题