Question

我试图用这个毫无意义的按钮创建一个网站

    <p id="pButt" style="position:absolute; top:500px; font-family:Impact, charcoal, sans-serif">Pointless button!</p>
<button type="button" onClick="pButt()" style="position:absolute; top:550px">Don't click it</button>

<script>
function pButt() {
 var textButt = textButt + 1;
 if (textButt === 1) {
 document.getElementById("pButt").innerHTML = "Seriously, it's pointless"
 }
 else {
  if (textButt === 2) {
  document.getElementById("pButt").innerHTML = "Ouch, that tickles!"
  else {
   if (textButt >= 3) {
   document.getElementById("pButt").innerHTML = "Ok, I'm bored of writing Javascript now. No point clicking anymore!"
}
}
}
}
</script>

我希望它能更改带有id＆＃39; pButt＆＃39;的段落中的文字。严肃地说，这是毫无意义的＆＃39;第一次，哎哟，痒痒！＆＃39;第二，好的，我现在很难写Javascript。没点点击了！＆＃39;第三次。为什么代码不起作用？我对Javascript很陌生，但如果有一些愚蠢的拼写错误，我真的很抱歉。

Answer 1

您必须在textButt之外声明并初始化pButt。以下内容适用：

<p id="pButt" style="position:absolute; top:500px; font-family:Impact, charcoal, sans-serif">Pointless button!</p>
<button type="button" onClick="pButt()" style="position:absolute; top:550px">Don't click it</button>

<script>
    var textButt = 0;
    function pButt() {
        textButt++;
        if (textButt === 1) {
            document.getElementById("pButt").innerHTML = "Seriously, it's pointless"
        } else if (textButt === 2) {
            document.getElementById("pButt").innerHTML = "Ouch, that tickles!"
        } else  if (textButt >= 3) {
            document.getElementById("pButt").innerHTML = "Ok, I'm bored of writing Javascript now. No point clicking anymore!"
        }
    }
</script>

或者，你可以稍微重构一下：

<p id="pButt" style="position:absolute; top:500px; font-family:Impact, charcoal, sans-serif">Pointless button!</p>
<button type="button" onClick="pButt()" style="position:absolute; top:550px">Don't click it</button>

<script>
    var message, textButt = 0;
    function pButt() {
        switch(++textButt) {
            case 1:
                message = "Seriously, it's pointless";
                break;
            case 2:
                message = "Ouch, that tickles!";
                break;
            default:
                message = "Ok, I'm bored of writing Javascript now. No point clicking anymore!";
        }
        document.getElementById("pButt").innerHTML = message;
    }
</script>

Answer 2

您必须将textButt变量移到函数之外。由于它是一个局部变量，因此它现在不会在按钮点击中保持不变。您还应该将其初始化为0。

Answer 3

您必须将textButt声明为公共变量

  var textButt = 0;
    function pButt() {
     textButt = textButt + 1;
     if (textButt === 1) {
     document.getElementById("pButt").innerHTML = "Seriously, it's pointless"
     }
     else {
      if (textButt === 2) {
      document.getElementById("pButt").innerHTML = "Ouch, that tickles!"
      else {
       if (textButt >= 3) {
       document.getElementById("pButt").innerHTML = "Ok, I'm bored of writing Javascript now. No point clicking anymore!"
    }
    }
    }
    }

Answer 4

除了在函数内部初始化textButt之外，只有增量应该在函数内。你可以查一下 http://jsfiddle.net/D9HEU/

var textButt = 0;

 function pButt() {
     textButt++;
     if (textButt == 1) {
         document.getElementById("pButt").innerHTML = "Seriously, it's pointless"

     } else if (textButt == 2) {
         document.getElementById("pButt").innerHTML = "Ouch, that tickles!"
     } else if (textButt >= 3) {
         document.getElementById("pButt").innerHTML = "Ok, I'm bored of writing Javascript now. No point clicking anymore!"
     }

 }

“无意义按钮”不会改变文字

4 个答案: