javascript 我的函数在第二次被点击时将不起作用答案

【问题标题】：javascript my function won't work the second time it's clickedjavascript 我的函数在第二次被点击时将不起作用
【发布时间】：2013-09-23 05:09:44
【问题描述】：

大家好，我对 JavaScript 还是比较陌生，需要一些帮助。我尝试了一些不同的东西，但我似乎无法弄清楚。我的 commandHeld 函数有问题。我函数的第一部分将我的类从“keyboard”或“keyboard_normal”更改为“keyboardCmd”。我希望第二部分根据我在 h3 标签中编写的内容将类更改回“键盘”或“键盘正常”。我将第二部分放在另一个名为 regress 的函数中，并给它一个参数 press ，因为我打算稍后重用它。

类更改为“keyboardCmd”就好了，但是当我再次单击我的跨度时，它不会更改为“keyboard”或“keyboard_normal”。我尝试将代码从 regress () 放入 commandHeld () 而不是 regress 函数，但没有运气的类从“keyboardCmd”更改为“keyboard_normal”或“keyboard”。

“onclick”在我的 cmdLeft 和 cmdRight Spans 上。为了安全起见，我也尝试了 cmdLeft_hover 和 cmdRight_hover 跨度，但这也无济于事。

我在一个临时网站上发布了到目前为止的内容。我希望这有帮助。 http://keyboard.businesscatalyst.com/index.html

这是我的 HTML：

    <body>
    <h3 id = "changeH3Text" onClick="changeNameToLetters()">Regular Keyboard on Hover</h3>
      <div id="keyboardContainer" class="keyboard">
      <div class = "row6">

             <span id="cmdLeft" onClick="commandHeld()">
             <span class="hover"  id="cmdLeft_hover"></span>
             </span>


              <span id="cmdRight" onClick="commandHeld()">
             <span class="hover"  id="cmdRight_hover"></span>
             </span>
      </div><!--end of row 6 div-->
   </div><!--end of keyboardContainer div-->
</body>

这是我的 javascript：

function changeNameToLetters() {
    //keyboard container variables
    var keyboardState = document.getElementById("keyboardContainer");
    var currentClass = keyboardState.className;

    //h3 text variables
    var h3Text = document.getElementById("changeH3Text");
    var currentText = h3Text.innerHTML;

    if (currentClass == "keyboard_normal" && currentText == "Tool Name on Hover") {
        keyboardState.className = "keyboard";
        h3Text.innerHTML = "Regular Keyboard on Hover";
    } //end if
    else {
        keyboardState.className = "keyboard_normal";
        h3Text.innerHTML = "Tool Name on Hover";
    } //end else
} //End function

function commandHeld() {
    //keyboard container variables
    var keyboardState = document.getElementById("keyboardContainer");
    var currentClass = keyboardState.className;

    //h3 text variables
    var h3Text = document.getElementById("changeH3Text");
    var currentText = h3Text.innerHTML;

    if (currentClass == "keyboard_normal" || "keyboard") {
        keyboardState.className = "keyboardCmd";

    } //End if
    else {
        regress('keyboardCmd');
    }

} //End function

function regress(pressed) {
    //keyboard container variables
    var keyboardState = document.getElementById("keyboardContainer");
    var currentClass = keyboardState.className;

    //h3 text variables
    var h3Text = document.getElementById("changeH3Text");
    var currentText = h3Text.innerHTML;

    if (currentText == "Tool Name on Hover" && currentClass == pressed) {

        keyboardState.className = "keyboard_normal";

    } //End if
    else {
        keyboardstate.className = "keyboard";
    }
} //End Function

【问题讨论】：

我试图将它放在jsfiddle.net 上，但仍然无法理解您尝试归档的内容。你能提供你的代码的 jsfiddle 版本吗？
这行if (currentClass == "keyboard_normal" || "keyboard") 中的条件可能不正确；也想知道你是否真的没有使用过这些 cmets /*end of row 6 div*/
@BangDao 我试着把它放在 jsfiddle 上，但结果不是太好。 jsfiddle.net/hothit43/9QJRc/6
@BangDao 在一个临时网站上发布了我目前的内容，希望对keyboard.businesscatalyst.com/index.html 有所帮助
@Vishal 我实际上并没有使用这些 cmets。我在发布后注意到我使用了 /* 而不是

标签： javascript html

【解决方案1】：

与Chrome console 闲逛发现：

您的代码中存在无效条件（函数commandHeld）
regress 函数中还有一个错字（keyboardstate != keyboardState）

工作代码：

function changeNameToLetters() {
    //keyboard container variables
    var keyboardState = document.getElementById("keyboardContainer");
    var currentClass = keyboardState.className;

    //h3 text variables
    var h3Text = document.getElementById("changeH3Text");
    var currentText = h3Text.innerHTML;

    if (currentClass == "keyboard_normal" && currentText == "Tool Name on Hover") {
        keyboardState.className = "keyboard";
        h3Text.innerHTML = "Regular Keyboard on Hover";
    } //end if
    else {
        keyboardState.className = "keyboard_normal";
        h3Text.innerHTML = "Tool Name on Hover";
    } //end else
} //End function

function commandHeld() {
    //keyboard container variables
    var keyboardState = document.getElementById("keyboardContainer");
    var currentClass = keyboardState.className;

    //h3 text variables
    var h3Text = document.getElementById("changeH3Text");
    var currentText = h3Text.innerHTML;

    if (currentClass == "keyboard_normal" || currentClass == "keyboard") {
        keyboardState.className = "keyboardCmd";

    } //End if
    else {
        regress('keyboardCmd');
    }

} //End function

function regress(pressed) {
    //keyboard container variables
    var keyboardState = document.getElementById("keyboardContainer");
    var currentClass = keyboardState.className;

    //h3 text variables
    var h3Text = document.getElementById("changeH3Text");
    var currentText = h3Text.innerHTML;

    if (currentText == "Tool Name on Hover" && currentClass == pressed) {

        keyboardState.className = "keyboard_normal";

    } //End if
    else {
        keyboardState.className = "keyboard";
    }
} //End Function

Debugger是你的朋友:)

【讨论】：

顺便说一句，我很喜欢键盘的想法 :)
非常感谢您的回答！现在工作得很好:) 我尝试将其更改为该条件但它没有改变任何东西所以我将其更改回来，我没有意识到它是无效的。我会尝试更有效地使用 chrome 中的调试器。非常感谢 Zathrus。