JS更改文本onClick然后更改回onClick If ... else

时间:2012-12-20 08:19:40

标签: javascript text onclick

这是一个简单的。

我正在创建一个包含更改onClick的内容的链接。 Onload它应该说“”点击这里获取更多信息!“点击后,它应该说”点击这里获取更少的信息!“然后再点击”...更多信息“。

我确定我只是在某个地方犯了一个小错误,帮忙吗?

的JavaScript

<script>
function change_text()
{
if(document.getElementById("toggle_button").innerHTML="Click here for more   
information!"){
document.getElementById("toggle_button").innerHTML="Click here for less
information!";
}else{
    document.getElementById("toggle_button").innerHTML="Click here for more     
information!";
}}
</script> 

这是HTML

<a href='javascript: toggle()'><p id="toggle_button" onclick="change_text()">Click here  
for more information!</p></a>    

4 个答案:

答案 0 :(得分:4)

您不仅误用=作为===,而且还可以通过简单的技术大大改进您的代码:缓存。

function change_text() {
    var button = document.getElementById('toggle_button');

    if (button.innerHTML === "Click here for more information!") {
        button.innerHTML = "Click here for less information!";
    }
    else {
        button.innerHTML = "Click here for more information!";
    }
}

您可以看到代码变得更清晰。

答案 1 :(得分:1)

if(document.getElementById("toggle_button").innerHTML="Click here for more   
information!"){

应该是

if(document.getElementById("toggle_button").innerHTML == "Click here for more   
information!"){

您要分配而非比较,因此请使用==代替=

答案 2 :(得分:1)

将此问题用于解决您的问题,它会对您有所帮助 -

  1. 检查平等使用'=='
  2. javascript:void(0)在href上使用

            <html>
              <head>
    
                <title>index</title>
    
              </head>
              <body>
               <script type="text/javascript">
                    function change_text()
                        {
                            if(document.getElementById("toggle_button").innerHTML=="Click here for more information!")
                            {
                                document.getElementById("toggle_button").innerHTML="Click here for less information!";
                            }
                            else
                            {
                                document.getElementById("toggle_button").innerHTML="Click here for more information!";
                            }
                        }
            </script>
             <a href='javascript:void(0)' onclick="change_text()"><p id="toggle_button" >Click here for more information!</p></a>  
    
              </body>
            </html>
    

答案 3 :(得分:0)

你在

中错过了“=”
 if(document.getElementById("toggle_button").innerHTML="Click here for more   
    information!")

试试这段代码:

<script>
function change_text()
{
if(document.getElementById("toggle_button").innerHTML=="Click here for more   
information!"){
document.getElementById("toggle_button").innerHTML="Click here for less
information!";
}else{
    document.getElementById("toggle_button").innerHTML="Click here for more     
information!";
}}
</script>