Question

我必须使用JavaScript / jquery构建这个计算器，但是当我按下它在控制台日志中显示的按钮没有错误时，屏幕上不会显示任何数字我只是需要帮助找出如何获取数字到在屏幕上显示任何帮助表示赞赏

＆＃13;

<html>
<head>
    	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    	<title>Calculator</title>
    	<link rel="stylesheet" type="text/css" href="reset.css" />
    	<link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>
    	<div id="calculator">
    		<div id="calculation">0</div>
    		<div class="buttons">
    			<ul>
    				<li id="clear" class="clear darkgray">C</li>
    				<li class="empty darkgray">&nbsp;</li>
    				<li class="empty darkgray">&nbsp;</li>
    				<li id="/" class="operator orange">/</li>
    			</ul>
    			<ul>
    				<li id="7" class="digit">7</li>
    				<li id="8" class="digit">8</li>
    				<li id="9" class="digit">9</li>
    				<li id="*" class="operator orange">*</li>
    			</ul>
    			<ul>
    				<li id="4" class="digit">4</li>
    				<li id="5" class="digit">5</li>
    				<li id="6" class="digit">6</li>
    				<li id="-" class="operator orange">-</li>
    			</ul>
    			<ul>
    				<li id="1" class="digit">1</li>
    				<li id="2" class="digit">2</li>
    				<li id="3" class="digit">3</li>
    				<li id="+" class="operator orange">+</li>
    			</ul>
    			<ul>
    				<li id="0" class="digit wide nobottom">0</li>
    				<li id="." class="digit nobottom">.</li>
    				<li id= "=" class="equals orange nobottom">=</li>
    			</ul>
    		</div>
    
    	</div>
    	<script src="js.js"></script>
     </body>
    </html>

＆＃13;

{{1}}

＆＃13;

Answer 1

问题出在这里

$('#calculation').append(num1);

将.append更改为.text

Answer 2

var type = obj.classList[1];永远不会返回digit，因为该类位于第0位。请改用属性（data-type="digit"）或classList.contains("digit")

使用classList.contains

当使用class属性来定位元素和商店类型或状态时，我建议使用某种前缀（例如js-）来区分样式类和交互性。< / p>

＆＃13;

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");

console.log("Div 1, type is digit:", div1.classList.contains("digit"));
console.log("Div 2, type is digit:", div2.classList.contains("digit"));
console.log("Div 3, type is digit:", div3.classList.contains("digit"));

＆＃13;

<div id="div1" class="test digit something-else">1</div>
<div id="div2" class="digit something-else test">2</div>
<div id="div3" class="something-else test">3</div>

＆＃13;

使用data-属性

在元素中存储状态/类型可以在自定义属性中完成。自定义属性始终以data-为前缀。主要好处是：

他们不会与造型发生冲突
您可以为所有类型重复使用一个属性

＆＃13;

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");

var getType = function(el) {
   return el.getAttribute("data-type"); 
}

console.log("Div 1, type is:", getType(div1));
console.log("Div 2, type is:", getType(div2));
console.log("Div 3, type is:", getType(div3));

＆＃13;

<div id="div1" data-type="digit" class="test something-else">1</div>
<div id="div2" data-type="digit" class="something-else test">2</div>
<div id="div3" data-type="otherType" class="something-else test">3</div>

＆＃13;

计算器生成控制台日志，但屏幕上没有任何内容

2 个答案: