Привет, ребята, я по-прежнему относительно новичок в 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
Немного пошутившись с консолью Chrome, выяснилось, что:
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
Отладчик - ваш друг :)