Более элегантный способ изменить значение моего div? - PullRequest
0 голосов
/ 14 октября 2011

Итак, мне нужно изменить некоторые цифры на экране при нажатии клавиш, у меня это работает, но я не доволен этим.

У меня есть поле ввода и элемент div, который обновляется при изменении значения входного поля. Я сделал это так, чтобы меня не стесняло мерцание в каратах поля ввода и т. Д. Я вообще не хочу отображать поле ввода, но когда я скрываю его с помощью CSS или type = "hidden", оно больше не работает. Я пытался заставить это работать с переменными JS, но пока безуспешно.

Есть идеи?

HTML

<html>
<head>
 <link rel="stylesheet" type="text/css" href="number.css" />
</head>

<body onLoad="focus();myText.focus();changeNumber()">

<div id='number'>

</div>

<input type="text" id="myText" value="1"/>

</body>

<footer>
<script type="text/javascript" src="number.js"></script>
</footer>

</html>

JAVASCRIPT

var myText = document.getElementById("myText");

function changeNumber(){
var userInput = document.getElementById('myText').value;
document.getElementById('number').innerHTML = userInput;
}

// Capture keyDown events
myText.onkeydown = function(e) {
// "34" is the up arrow key
if (e.keyCode == 34) {
    // increment the value in the text input
    myText.value++;
changeNumber()

// "33" is the down arrow key
} else if (e.keyCode == 33 && myText.value > 1) {
    // decrement the value in the text input
    myText.value--;
changeNumber()
}
}

ЗДЕСЬ В ФИНАЛЬНОМ ФИКСИРОВАННОМ КОДЕКСЕ * СПАСИБО, ПАРНИ! **

HTML

<html>
<head>
 <link rel="stylesheet" type="text/css" href="number.css" />
</head>

<body onLoad="focus();number.focus();changeNumber()">

<div id='number' value="1">

</div>

</body>

<footer>
<script type="text/javascript" src="number.js"></script>
</footer>

</html>

JAVASCRIPT

var i = parseInt(1);

function changeNumber(){
var userInput = i;
document.getElementById('number').innerHTML = userInput;
}

// Capture keyDown events for document
document.onkeydown = function(e) {
// "34" is the PGUp key
if (e.keyCode == 34) {
    // increment the value in the text input
    (i++);
changeNumber()

// "33" is the PGDown key
} else if (e.keyCode == 33 && i > 1) {
    // decrement the value in the text input
    (i--);
changeNumber()
}

// "66" is the b key
if (e.keyCode == 66){
window.location.reload()
} 

}

1 Ответ

0 голосов
/ 14 октября 2011

Проблема с вашим кодом заключается в следующем:

myText.value--;

и

myText.value++;

myText - это элемент DOM, а в свойстве value есть строка, а не целое число, я рекомендую сделать:

var i = parseInt(myText.value);
myText.value = (i++);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...