Javascript 计算器生成控制台日志,但屏幕上没有显示任何内容
我必须使用JavaScript/jquery构建这个计算器,但是当我按下控制台日志中显示的按钮时,屏幕上不会显示任何数字,不会出现任何错误。我只需要帮助了解如何将数字显示在屏幕上。任何帮助都将不胜感激Javascript 计算器生成控制台日志,但屏幕上没有显示任何内容,javascript,jquery,html,calculator,Javascript,Jquery,Html,Calculator,我必须使用JavaScript/jquery构建这个计算器,但是当我按下控制台日志中显示的按钮时,屏幕上不会显示任何数字,不会出现任何错误。我只需要帮助了解如何将数字显示在屏幕上。任何帮助都将不胜感激 函数init(){ console.log('start'); var num1=0; var num2=0; var op=''; var ON=''; $('.digit,.operator orange')。单击(函数(){ var ID=this.ID; console.log(ID);
函数init(){
console.log('start');
var num1=0;
var num2=0;
var op='';
var ON='';
$('.digit,.operator orange')。单击(函数(){
var ID=this.ID;
console.log(ID);
计算器(本);
});
函数计算器(obj){
控制台登录;
变量ID=对象ID;
变量类型=对象类列表[1];
如果(类型==‘数字’){
如果(开==真){
$(“#计算”).empty();
}
$('计算').append(ID);
console.log(ID+“!”)
}else if(类型==='operator orange'){
op=obj.textContent;
如果(num1==0){
num1=$(“#计算”).text();
}否则{
num2=$(“#计算”).text();
num1=评估值(num1+op+num2);
}
$(“#计算”).empty();
}else if(类型==='operator orange'){
num2=$(“#计算”).text();
num1=评估值(num1+op+num2);
$(“#计算”).empty();
$('计算')。追加(num1);
开=真;
num1=0;
num2=0;
}else if(类型=='clear'){
$(“#计算”).empty();
num1=0;
num2=0;
开=假;
}
}
}
$(文件).ready(初始化)代码>
计算器
0
- C
- /
- 7
- 8
- 9
- *
- 4
- 5
- 6
- -
- 1
- 2
- 3
- +
- 0
- =
问题就在这里
$('#calculation').append(num1);
Change.append to.text问题就在这里
$('#calculation').append(num1);
Change.append to.textvar type=obj.classList[1]
将永远不会返回数字
,因为该类位于位置0。改为使用属性(data type=“digit”
)或classList.contains(“digit”)
使用类列表。包含
当使用class
属性来设置目标元素和存储类型或状态时,我建议使用某种前缀,例如js-
,来区分样式类和交互性
var div1=document.getElementById(“div1”);
var div2=document.getElementById(“div2”);
var div3=document.getElementById(“div3”);
log(“div1,类型为digit:”,div1.classList.contains(“digit”);
log(“div2,类型为digit:”,div2.classList.contains(“digit”);
log(“div3,类型是digit:”,div3.classList.contains(“digit”)代码>
1
2.
3
var type=obj.classList[1]
将永远不会返回数字
,因为该类位于位置0。改为使用属性(data type=“digit”
)或classList.contains(“digit”)
使用类列表。包含
当使用class
属性来设置目标元素和存储类型或状态时,我建议使用某种前缀,例如js-
,来区分样式类和交互性
var div1=document.getElementById(“div1”);
var div2=document.getElementById(“div2”);
var div3=document.getElementById(“div3”);
log(“div1,类型为digit:”,div1.classList.contains(“digit”);
log(“div2,类型为digit:”,div2.classList.contains(“digit”);
log(“div3,类型是digit:”,div3.classList.contains(“digit”)代码>
1
2.
3
如果您使用类似JSFiddle或JSBin:)的东西,将更容易复制和调试var type=obj.classList[1]
永远不会返回数字
,因为该类位于0
位置。请改用属性(data type=“digit”
)或classList.contains(“digit”)
。您的解决方案工作正常,感谢您的支持advice@user3297291你能给我一个回复吗?我会接受的。谢谢!我已经发布了我的评论,作为对两个示例的回答。如果您使用JSFIDLE或JSBin:)var type=obj.classList[1]之类的工具,那么复制和调试会更容易
永远不会返回数字
,因为该类位于0
位置。请改用属性(data type=“digit”
)或classList.contains(“digit”)
。您的解决方案工作正常,感谢您的支持advice@user3297291你能给我一个回复吗?我会接受的。谢谢!我用两个例子来回答我的评论。我试过了,它仍然只显示在控制台日志中。我试过了,它仍然只显示在控制台日志中