请老师帮我检查，谢谢

首页课程实战体系课手记专栏慕课教程

请老师帮我检查，谢谢

来源：4-2 第二次修改--使用循环

冯靖博

2020-09-29 17:29:43

<p>

</p>

<p>

</p>

</div>

//获取元素

var btn=document.querySelectorAll(".btn");

var signal=document.querySelector(".signal");

var frontinput=document.querySelector(".frontinput");

var backinput=document.querySelector(".backinput");

var result=document.querySelector(".result");

//Byclassname 与 queryselector的区别

//document.queryselector.value??

//绑定事件

for (var i=0;i<btn.length;i++){

btn[i].onlick= function(){

console.log(this.value);

switch (this.title){

case 'add':

add();

break;

case 'subtract':

subtract();

break;

case 'multiply':

multiply();

break;

case 'divide':

divide();

break;

}

};

}

//注意add()与add的区别

//写函数

function add(){

signal.innerHTML="+";

result.innerHTML=frontinput.value+backinput.value;

}

function subtract(){

signal.innerHTML="-";

result.innerHTML=frontinput.value-backinput.value;

}

function multiply(){

signal.innerHTML="*";

result.innerHTML=frontinput.value*backinput.value;

}

function divide(){

signal.innerHTML="/";

result.innerHTML=frontinput.value/backinput.value;

}

//result改内容用.innerHTML

</script>

</body>

</html>

写回答

1回答

好帮手慕慕子

2020-09-29

同学你好，对于你的问题解答如下：

因为onclick拼写错误，到点击按钮无法实现效果，建议修改：
由于value属性值获取后是字符串类型的，使用+时，会进行字符串拼接，效果如下所示是不对的。
建议：使用Number方法，将其转成数值。
注意：只需要给加法函数中的value使用Number方法进行转换就可以了，减法、除法和乘法在进行运算时，默认会先转成数值类型，然后才参与运算，不需要再添加Number进行转换了。
如下图所示的注释，是不理解getElementsByClassName与querySelector方法的区别吗？
如果是这样的话，那么可以参考如下解析对比理解：
（1）传入的参数不同，getElementsByClassName方法只能接收类名作为参数，querySelector方法可以接收任意属于css的选择器。示例：
（2）由上面的打印结果可以看出，getElementsByClassName获取元素会存放在类数组中，要想使用里面的元素，需要使用索引的方式获取，而querySelector方法直接就获取了一个元素。
（3）getElementsByClassName获取的元素是动态的，会随着dom结构的变化，得到的元素也会跟着变化，但是querySelector获取的元素是静态的，示例：
先分别使用两种方式获取了a链接，之后将div下的内容设置为空，测试输出结果如下：
由于页面中a链接已经不存在了，所以getElementsByClassName方式获取的元素是动态的，所以结果为空，而querySelector方法获取的元素是静态的，依然还在。