Javascript和document.getElementsByClassName（“ DigitalCalculator”）中的数字计算器

Question

我正在尝试为数字计算器编写程序。 加载页面时，浏览器不显示任何时钟。

<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 {background-color：blue;}

</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>

Answer 1

比较您的两个版本：

// 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);

Answer 2

不确定使用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>

Javascript和document.getElementsByClassName（“ DigitalCalculator”）中的数字计算器

问题描述

2 个解决方案

解决方案1
0 2013-06-11 20:31:55

解决方案2
0 2013-06-11 20:37:02

Javascript和document.getElementsByClassName（“ DigitalCalculator”）中的数字计算器

问题描述

2 个解决方案

解决方案1 0 2013-06-11 20:31:55

解决方案2 0 2013-06-11 20:37:02

解决方案1
0 2013-06-11 20:31:55

解决方案2
0 2013-06-11 20:37:02