Увеличить числовое значение, отображаемое на экране - PullRequest
Новая
       33

Увеличить числовое значение, отображаемое на экране

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

Мне нужно, чтобы на веб-странице отображался номер, который будет увеличиваться или уменьшаться при нажатии клавиш со стрелками вверх или вниз. Я нашел / массировал вместе файл javascript, чтобы сделать это, но я не могу заставить его работать с моим HTML. Я пытался связать его с текстовым полем HTML, но он не будет работать.

если бы кто-нибудь мог помочь мне с HTML, чтобы это работало, было бы замечательно. 

var setTimeoutId; 
var keyIs = "up"; 

 function myIncrementFunction()
{
        var num = parseFloat(myText.value)+1;
        myText.value = num; 

}

myText.onkeydown = function(e)
{
keyIs = "down";

if(keyIs == "down")
    {
        var e = e || event ;
        if (e.keyCode == 38)
            {    
                for(var s=0; s<1; s++)
                    setTimeoutId = setTimeout('myIncrementFunction()',100); 
            }
    }
}

myText.onkeyup = function(e)
{ 
 keyIs = "up"; 
}

Попробовал это и до сих пор не работает ..>?

number.html 

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

<body>

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

</body>

</html>

number.js 

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

// Capture keyDown events
myText.onkeydown = function(e) {
// "38" is the up arrow key
if (e.keyCode == 38) {
    // increment the value in the text input
    myText.value++;
// "40" is the down arrow key
} else if (e.keyCode == 40) {
    // decrement the value in the text input
    myText.value--;
}
}

Я не понимаю, почему это работает в опубликованном примере, и когда я сохраняю свои файлы и открываю его в браузере, он не будет работать!

Я на OSX Lion, использую Chrome / Safari

Ответы [ 3 ]

1 голос
/ 13 октября 2011

Похоже, что происходит несколько вещей. Во-первых, как указывает jayp в своем комментарии, вы не определяете, что такое myText.

Во-вторых, я думаю, вы немного усложняете это. Как насчет того, чтобы попробовать что-то вроде этого:

Дайте вашему текстовому вводу ID, что-то вроде <input type="text" id="myText" />

Тогда используйте что-то вроде этого: 

// Assign our text input to a variable
var myText = document.getElementById("myText");

// Capture keyDown events
myText.onkeydown = function(e) {
    // "38" is the up arrow key
    if (e.keyCode == 38) {
        // increment the value in the text input
        myText.value++;
    // "40" is the down arrow key
    } else if (e.keyCode == 40) {
        // decrement the value in the text input
        myText.value--;
    }
}

Это довольно упрощенный пример, но он должен указать вам правильное направление. Надеюсь, это поможет.

См. Рабочий пример на JSFiddle

Edit:

В вашем случае это не работает, потому что скрипт пытается найти элемент input до того, как страница будет полностью загружена. Вы можете переместить свой скрипт внизу страницы следующим образом: 

<html>
    <head></head>
    <body>
        <input type="text" id="myText" />
        <script type="text/javascript" src="number.js"></script>
    </body>
</html>
0 голосов
/ 05 апреля 2013

Для этого есть небольшой плагин jQuery: https://github.com/nakupanda/number-updown

Использование: 

$('#textInput').updown();

Просмотреть демонстрацию здесь: http://jsfiddle.net/XCtaH/embedded/result/

События клавиатуры и колесика мышиподдерживается

0 голосов
/ 16 мая 2012

В вашем number.js вы увеличиваете значение текстового поля, но у вас нет изначально установленного значения, поэтому увеличивать нечего.

Попробуйте отредактировать HTML-код так, чтобы вы получили: 

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