簡體   English   中英

一種更優雅的方式來更改div的價值?

[英]A More Elegant way to change the value of my div?

好的,我需要做的是在按下鍵時更改屏幕上的一些數字,我可以使用它,但是我不滿意。

我有一個輸入字段和一個div,當輸入字段的值更改時,該div正在更新。 我這樣做是為了使我不會受到輸入字段閃爍的克拉等的限制。我根本不想顯示輸入字段,但是當我使用CSS隱藏它或鍵入=“ 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()
} 

}

您的代碼存在以下問題:

myText.value--;

myText.value++;

myText是一個DOM元素,並且value屬性包含一個字符串,而不是整數,我建議這樣做:

var i = parseInt(myText.value);
myText.value = (i++);

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM