Question

嘿伙计我还是比较新的JavaScript，需要一些帮助。我尝试了一些不同的东西，我似乎无法弄明白。我的commandHeld函数遇到了问题。我的函数的第一部分将我的类从“keyboard”或“keyboard_normal”更改为“keyboardCmd”。我希望第二部分根据我在h3标签中写的内容将类更改回“keyboard”或“keyboard_normal”。我把第二部分放在另一个叫做回归的函数中，给它一个压缩参数，因为我打算以后重用它。

该类更改为“keyboardCmd”就好了但是当我再次单击我的跨度时它不会更改为“keyboard”或“keyboard_normal”。我尝试将来自regress（）的代码放入commandHeld（）而不是退回函数，但是从“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

Answer 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是你的朋友：）

javascript我的功能在第二次点击时不起作用

1 个答案: