スパンクラス素子。ここ

を表示ない値はコードであるいくつかの理由スパンクラス素子。ここ

var listener = document.querySelectorAll('#calculator span'); 
 

 
// look at each widget pressed and update calculator 
 
for (var count = 0; count < listener.length; count++) { 
 
    listener[count].onclick = function() { 
 
    update() 
 
    }; 
 
} 
 

 

 

 
function update() { 
 
    // Get input of calculator screen and button pressed 
 
    var widget = this.innerHTML; 
 
    var screen = document.querySelector('.screen'); 
 
    var screenIn = screen.innerHTML; 
 

 
    // clear the screen 
 
    if (widget == 'DEL') { 
 
    screen.innerHTML = ''; 
 
    } 
 

 
    // if = sign is pressed, evaluate the screen input 
 
    // TODO: handle special cases (like if the input equation isn't syntactically correct) 
 
    else if (widget == '=') { 
 
    screen.innerHTML = eval(inputEq); 
 
    } 
 

 
    // change x to * for evaluator 
 
    else if (widget == 'x') { 
 
    screen.innerHTML += '*'; 
 
    } 
 

 
    //clear the text inside the screen 
 
    else if (widget == 'C') { 
 
    screen.innerHTML = ""; 
 

 
    } else { 
 
    screen.innerHTML += widget; 
 
    } 
 

 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script type="text/javascript" src="main.js"></script> 
 
    <link href="css.css" type="text/css" rel="stylesheet" /> 
 
</head> 
 

 
<body> 
 
    <div id="calculator"> 
 
    <!-- Screen and clear button --> 
 
    <div class="top"> 
 
     <span class="clear">C</span> 
 
     <div class="screen"></div> 
 
    </div> 
 

 
    <div class="buttons"> 
 
     <!-- number operators and other buttons --> 
 
     <span>7</span> 
 
     <span>8</span> 
 
     <span>9</span> 
 
     <span class="operator">DEL</span> 
 
     <span>4</span> 
 
     <span>5</span> 
 
     <span>6</span> 
 
     <span class="operator">/</span> 
 
     <span>1</span> 
 
     <span>2</span> 
 
     <span>3</span> 
 
     <span class="operator">x</span> 
 
     <span>+/-</span> 
 
     <span>0</span> 
 
     <span>.</span> 
 
     <span class="operator">-</span> 
 
     <span>(</span> 
 
     <span>)</span> 
 
     <span class="eval">=</span> 
 
     <span class="operator">+</span> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

クリックすると、スパンの値のいずれもがスクリーン部上に表示されていません。私は何が起こっているのか正確にはわからない。私は、ボタンのクリックに更新機能を割り当てるための様々なテクニックを試しましたが、何も動作していないようです。もしあなたが何かに気付いたら、私に知らせてください。ここで

は、文書がロードされる前に、要素のためキシにしているCSS

* { 
margin: 0; 
padding: 0; 
box-sizing: border-box; 

font: bold 14px Verdana, Geneva, sans-serif; 
} 

html { 
height: 100%; 
background: black; 
background-size: cover; 
} 

#calculator { 
width: 325px; 
height: auto; 
margin: 100px auto; 
padding: 20px 20px 9px; 
background: #b6ffad; 
border-radius: 20px; 
box-shadow: 0px 4px #94ce8c, 0px 10px 15px rgba(0, 0, 0, 0.2); 
} 

.top span.clear { 
float: left; 
} 

.top .screen { 
height: 40px; 
width: 212px; 

float: right; 

padding: 0 10px; 

background: rgba(0, 0, 0, 0.2); 
border-radius: 20px; 
box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2); 

font-size: 17px; 
line-height: 40px; 
color: white; 
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); 
text-align: right; 
letter-spacing: 1px; 
} 

.buttons, .top {overflow: hidden;} 

.buttons span, .top span.clear { 
float: left; 
position: relative; 
top: 0; 

cursor: pointer; 

width: 66px; 
height: 36px; 

background: white; 
border-radius: 20px; 
box-shadow: 0px 4px rgba(0, 0, 0, 0.2); 

margin: 0 7px 11px 0; 

color: #565656; 
line-height: 36px; 
text-align: center; 

user-select: none; 

transition: all 0.2s ease; 
} 

.buttons span.operator { 
background: #afafaf; 
box-shadow: 0px 4px #878787; 
margin-right: 0; 
color: white; 
} 

.buttons span.eval { 
background: #4c4c4c; 
box-shadow: 0px 4px #333333; 
color: white; 
} 

.top span.clear { 
background: #ff9fa8; 
box-shadow: 0px 4px #ff7c87; 
color: white; 
} 

.buttons span:hover { 
background: #82d179; 
box-shadow: 0px 4px #64a05d; 
color: white; 
} 

.buttons span.eval:hover { 
background: #e2e2e2; 
box-shadow: 0px 4px #bababa; 
color: black; 
} 

.top span.clear:hover { 
background: #f68991; 
box-shadow: 0px 4px #d3545d; 
color: white; 
} 

.buttons span:active { 
box-shadow: 0px 0px #ffffff; 
top: 4px; 
} 

.buttons span.eval:active { 
box-shadow: 0px 0px #ffffff; 
top: 4px; 
} 

.top span.clear:active { 
top: 4px; 
box-shadow: 0px 0px #ffffff; 
}

出典

2017-03-26 LogNIsGood

私はオペレーターがまだ動作しない場合があります知っているが、私の目標は、数字が最初に表示されるまでに取得することです演算子に取り組む – LogNIsGood

Javascriptで！=と==ではなく！==と===を使用することを忘れないでください。 – jakeehoffmann

良い点はこれらの変更を加えることです（jsができるなら正しい形式に変換するのを忘れてしまったので）。私はまだ何も表示されていないのか分かりません – LogNIsGood

このようにonclickハンドラを割り当てると、クリックされた要素がハンドラのコンテキストとして自動的に渡されます。したがって、内部のupdateへの参照はwindowで、<span>要素ではありません。

次のようにあなたの.jsファイルを修正し、あなたが望むものを達成するために：

for (var count = 0; count < listener.length; count++) { 
    listener[count].onclick = function(event){ 
//          ^---include the event param here 

    update(event); 
//   ^---- pass the reference to your update function 
    }; 
} 

//    v-----define an event parameter 'e' in your update function 
function update(e) { 

    // Your new widget variable will be: 
    var widget = e.target.innerHTML; 

    //...include the rest of your code as is 
    // apart from: 
    else if (widget == '=') { 
    //screen.innerHTML = eval(inputEq); 
    //       ^---- inputEq not defined anywhere 
    // change to: 
    screen.innerHTML = eval(screen.innerHTML); 
    } 

}

Click here for a jsbin equivalent of the above

出典

2017-03-26 02:13:39 Pineda

私の答えを受け入れてくれてありがとう。あなたが私の答えが役に立つと分かった場合は、アップの投票が大いに評価されるでしょう:) – Pineda

CSSファイルを追加して表示されない理由を確認しました – LogNIsGood

何も表示されない場合は、 – Pineda

です。 </body>タグの直前（クエリー対象の要素の下）にスクリプトを移動するか、要素がそこにロードされた後にロードされるか、クエリー（およびonclickハンドラ定義）をonloadイベントハンドラ内に配置します。

第2のものは、更新機能とそれをバインドする方法です。更新機能のthisがボタン要素になりたいと思っています。ここでinnerHTMLはその番号または演算子になります。しかし、あなたが行うようにあなたは、更新機能をバインドする場合：次に

listener[count].onclick = function(){update()};

thisは匿名関数（内部のボタンになります）{}のような：

listener[count].onclick = function(){ 
    this.innerHTML; // This would be a number/operator of a button. 
    update(); // Function will be called but button wont be its "this" variable, but the window. 
};

あなたはどちらかの引数またはバインドとして更新するためにこれを渡すことができます更新直接のように：

listener[count].onclick = update;

何()がないことに注意してください（オペレーターを呼び出す）、あなただけのPAその結果ではなく関数で変数を宣言する。

編集：

<script type="text/javascript" src="main.js"></script>

だから、スクリプトがすでにロードされているに依存要素の後に解雇され
<span class="operator">+</span> </div> </div> <script type="text/javascript" src="main.js"></script>  </body>

へと：は、あなたは、この行を移動することができ、さらに説明するために、またはページが読み込まれた後にボタンのクエリを開始できるので、この部分は

です10

var listener = document.querySelectorAll('#calculator span'); 

// look at each widget pressed and update calculator 
for (var count = 0; count < listener.length; count++) { 
    listener[count].onclick = function() { 
    update() 
    }; 
}

は次のようになります。

onload = function(){ 
    var listener = document.querySelectorAll('#calculator span'); 

    // look at each widget pressed and update calculator 
    for (var count = 0; count < listener.length; count++) { 
    listener[count].onclick = function() { 
     update() 
    }; 
    } 
}

は、だから今window.onloadイベントハンドラです。私が何を意味するのかボタンにバインディングアップデート機能付き

、た、代わりの：

for (var count = 0; count < listener.length; count++) { 
    listener[count].onclick = function() { 
    update() 
    }; 
}

ん：

for (var count = 0; count < listener.length; count++) { 
    listener[count].onclick = update; 
}

だから今、更新関数の内部で、thisはボタンではなく、窓になります。

出典

2017-03-26 02:13:29

私はそれを試してみましたが、何も現れませんでした。だからあなたの言いたいことは、クエリが修正が必要になる前に読み込まれていない要素ですか？ – LogNIsGood

あなたのアプローチを試してみましたが、何もできませんでした – LogNIsGood

私は詳細な説明のために自分の投稿を更新しました。 –

スパンクラス素子。ここ

答えて

関連する問題