JavaScript 我的函数在第二次被点击时将无法工作

javascript my function won't work the second time it's clicked

本文关键字：工作 函数 我的 第二次 JavaScript      更新时间：2023-09-26

嘿伙计们，我对JavaScript还比较陌生，需要一些帮助。我尝试了一些不同的事情，但我似乎无法弄清楚。我的命令保持功能有问题。我的函数的第一部分将我的类从"键盘"或"keyboard_normal"更改为"keyboardCmd"。我希望第二部分根据我在 h3 标签中编写的内容将类改回"键盘"或"keyboard_normal"。我将第二部分放在另一个我称为 regress 的函数中，并给了它一个 press 参数，因为我计划稍后重用它。

类更改为"keyboardCmd"很好，但是当我再次单击我的跨度时，它不会更改为"键盘"或"keyboard_normal"。我尝试将 regress （） 中的代码放入 commandHeld （） 而不是回归函数中，但类从"keyboardCmd"更改为"keyboard_normal"或"键盘"没有运气。

"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

在Chrome控制台上闲逛时发现：

  1. 代码中存在无效条件（函数 commandHeld ）
  2. 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

调试器是你的朋友:)

相关文章：