Javascript моя функция не будет работать во второй раз, когда он нажал

Question

Javascript моя функция не будет работать во второй раз, когда он нажал

0

Привет, ребята, я по-прежнему относительно новичок в JavaScript и нуждаюсь в некоторой помощи. Я попробовал несколько разных вещей, и я не могу понять это. У меня возникают проблемы с моей функцией CommandHeld. Первая часть моей функции меняет мой класс с "клавиатуры" или "keyboard_normal" на "keyboardCmd". Я хочу, чтобы вторая часть меняла класс на "клавиатуру" или "keyboard_normal" на основе того, что я написал в теге h3. Я поместил вторую часть в другую функцию, которую я назвал регрессом, и дал ей параметр нажатия, потому что я планирую повторно использовать его позже.

Класс меняется на "keyboardCmd" просто отлично, но когда я снова нажимаю на свой диапазон, он не меняется на "клавиатуру" или "клавиатуру". Я попытался перевести код из 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

Skwisgaar 23 сен. 2013, в 07:59

Источник

Теги:

javascript

html

1 ответ

Ещё вопросы

Zathrus Writer · Accepted Answer · 2013-09-23T13-58-00.000Z

Немного пошутившись с консолью Chrome, выяснилось, что:

в вашем коде есть недопустимое условие (function 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

Отладчик - ваш друг :)

Кстати, мне нравится идея клавиатуры.
Большое спасибо за ваш ответ! Теперь работает прекрасно :) Условие, которое я пытался изменить на это, но ничего не изменилось, поэтому я изменил его обратно, я не понял, что это недействительно. Я постараюсь использовать отладчик в Chrome более эффективно. Спасибо большое, Затрус.