0

デジタル電卓用のプログラムを書こうとしています。ページを読み込んでも、ブラウザに時計が表示されません。

<html>
<head>
<style type="text/css">
.DigitalCalculator{
 background-color:blue;}

</style>        
</head>
<body>
<div **class="DigitalCalculator"**></div>
<script type="text/javascript">
function updateTimer(){

var time = new Date();
var h = time.getHours();
var m = time.getMinutes();
var s = time.getSeconds();
var setTime = ;
setTime.innerHTML = **document.getElementsByClassName("DigitalCalculator")**;
setTimeout('updateTimer()',1000);
        }
updateTimer();    
</script>
</body>
</html>

なぜこれが機能しないのですか？document.getElementsByClassName("DigitalCalculator") ?

コードを変更して問題を解決しました

var setTime = document.getElementById("clockDisplay");

以前のdocument.getElementsByClassName("DigitalCalculator")を使用できないのはなぜ ですか? 以下の私のプログラムを見てください。.DigitalCalculator{ 背景色:青;}

</style>        
</head>
<body>
<div id = "DisplayClock" **class="DigitalCalculator"**></div>
<script type="text/javascript">
function updateTimer(){

var time = new Date();
var h = time.getHours();
var m = time.getMinutes();
var s = time.getSeconds();
var setTime =document.getElementById("DisplayClock");
setTime.innerHTML = h;
setTimeout('updateTimer()',1000);
        }
updateTimer();    
</script>
</body>
</html>
4

2 に答える 2

0

getElementsById() を使用する利点がわからない。ただし、これは配列を返すため、(以下の例のように) 最初のヒットを参照するか、返されたインスタンスを列挙してそれぞれを更新する必要があります。 

<html>
<head>
<style type="text/css">
.DigitalCalculator { background-color:blue; }
</style>
</head>

<body>

<div class="DigitalCalculator"></div>

<script type="text/javascript">
function updateTimer(){

var time = new Date();
var h = time.getHours();
var m = time.getMinutes();
var s = time.getSeconds();
var setTime = null;
setTime = document.getElementsByClassName('DigitalCalculator');
if ( setTime != null ) {
    setTime[0].innerHTML = h.toString() + ':' + m.toString() + ':' + s.toString();
    }
setTimeout('updateTimer()',1000);
}

updateTimer();
</script>

</body>
</html>
于 2013-06-11T20:37:02.680 に答える
0

2 つのバージョンを比較します。

// syntax error
var setTime = ;

// trying to set the innerHTML of ? to a list of elements
// makes no sense!
setTime.innerHTML = document.getElementsByClassName("DigitalCalculator");

対：

// grab the div and keep it in a variable
var setTime =document.getElementById("DisplayClock");

// set the innerHTML of the div to the value of h (a number)
// now it makes sense...
setTime.innerHTML = h;

setTimeoutまた、文字列の代わりにへの関数参照を渡すことをお勧めします。

setTimeout(updateTimer, 1000);
于 2013-06-11T20:31:55.703 に答える