なぜ私の変数が足りないのですか？

EDIT：私は問題を解決することができました。ここで、新しいコードは次のとおりです。なぜ私の変数が足りないのですか？

<body> 
<script type="text/javascript"> 


function get(){}; 
function add(){ 
var ff= Number(document.getElementById("fn").value); 
var ll= Number(document.getElementById("ln").value); 
var gg= ff + ll 

document.getElementById("fn").value = ""; 
document.getElementById("ln").value = ""; 
document.getElementById("rslt").value = gg}; 
</script> 
<h1>Calculator</h1> 


<article id="a1"> 
<input id="fn" type="number" placeholder="first number" style="display:inline"> 

<span id="mark">MARK</span> 

<input id="ln" type="number" placeholder="last number" style="display:inline"> 

<span>=</span> 

<input id="rslt" type="number" placeholder="result" style="display:inline"> 

<button type="button" onclick="add();"> + </button> 
<button type="button"> - </button> 
<button type="button"> X </button> 
<button type="button"> % </button> 
</article> 

<p id="hint">This is a paragraph.</p> 



</body>

PS：すべての答えとコメントしてくれてありがとう。

私の変数「ff」と「ll」はこのページに追加されません。どうしたのですか？電卓を作成しようとしていて、現在ADD機能をプログラミングしています。しかし、私が両方のフィールドに数字を入力してADDを押すと、正しく追加されません。私はは、他のすべてのコードなしで同じメソッドを単独で試してみました。

ここで私は問題がある部分を含めるに失敗した場合のページコードのすべてです：

<!DOCTYPE html> 
    <html> 
    <head> 
</head> 
    <body> 

    <article> 
    <h1>Calculator</h1> 
    <input id="fn" type="real" placeholder="first number"></input> 
    <span id="mark"> + </span> 
    <input id="ln" type="real" placeholder="last number"></input> 
    <span id="e"> = </span> 
    <input id="re" type="real" value="0" placeholder="result"></input> 
    <br /> <br /> 
    <table> 
    <th><button type=button onclick="add()">add +</button></th> 
    <th><button type=button onclick="subtract()">subtract -</button></th> 
    <th><button type=button onclick="devide()">devide %</button></th> 
    <th><button type=button onclick="multiply()">multiply *</button></th> 
    <th><button type=button onclick="clea()">clear</button></th> 


    </article> 


    <script> 
    //setting up variables 
    var cc="+" 
    //setting up functions 

    //get function 
    function get(){ 
    var ff=document.getElementById("fn").value 
    var ll= document.getElementById("ln").value 
    } 
    //add function 
    function add() {get();cc="+"; 
    if (cc=="+"){ 
    document.getElementById("hint").innerHTML = "ADD"; 

    document.getElementById("re").value =ff+ll; 
    alert(ff) 
    }} 
    //subtract function 
    function subtract() {get(); cc="-" 
    if (cc=="-"){document.getElementById("hint").innerHTML = "SUBTRACT"} 
    } 
    //devide function 
    function devide() {get();cc="%" 
    if (cc=="%"){document.getElementById("hint").innerHTML = "DEVIDE"} 
    } 
    //multiply function 
    function multiply() {get();cc="*" 
    if (cc=="*"){ 
    document.getElementById("hint").innerHTML = "MULTIPLY"} 
    } 
    //clear function 
    function clea() { 
    document.getElementById("hint").innerHTML = "CLEAR" 
    document.getElementById("re").value =""} 
    </script> 

    <p id="hint" style="background-color:yellow; display:inline"></p> 
    </body> 
    </html>

出典

2017-08-06 Itame io

変数が全く異なるスコープにあるときに 'ff'に警告しています。 –

https://stackoverflow.com/help/someone-answersを参照してください – guest271314

私はここを参照してくださいカップルの問題：

1）作成した変数は、 get()では、その機能の範囲内でのみアクセスできます。あなたが他の機能の中に結果を確認したい場合は、get関数の外で最初に宣言する必要があります。

//setting up variables 
var cc="+"; 
var ll; 
var ff; 
//setting up functions 

function add() {get();cc="+"; 
    if (cc=="+"){ 
    document.getElementById("hint").innerHTML = "ADD"; 

    document.getElementById("re").value =""; 
    alert(ff) 
}}

2）あなたが実際に私はあなたのコード内の参照の任意の場所を加算または減算していません。有効なtypeも自己終了で<input>要素、ため</input>が無効である（alert(ff)）

出典

2017-08-06 16:56:30

私はあなたが間違っていると思います。私は、ff宣言を省略した別の答えでコードを試しました。それは問題が他の場所にあることを示唆していました。そして、私のポストにコードを挿入した時、私は何も追加していませんでした。愚かな私はポストする前に元のコードを復元することを忘れていた。 –

私は間違っていません。変数は、変数が最初に宣言された場所が見つかってからトップレベル（ウィンドウ）に到達してグローバルになるまで、スコープで引き上げられます。これは非常に基本的なJavaScript機能です。 –

@ oss-solomonを参照してください。しかし、この文脈では意味をなさない。私は関数に値を与える前に変数を宣言しておらず、問題なく動いていました。なぜそれが説明できますか？それは、ボタンを介して呼び出される関数のためですか？ボタンをクリックする前にページ全体が読み込まれているため、その時点で変数には既に値が設定されています。 –

"real"ではない、単にre要素（document.getElementById("re").value ="";）の値をクリアしてからff要素の中に置かれた値を警告していますHTML; typeを"number"に設定し、.valueAsNumberを使用して、文字列の代わりにasの値を取得します。

HTMLに</table>タグがありません。

ffとllはget関数内のローカル変数です。各関数が値にアクセスできるように、変数をグローバル変数として設定します。

また、#mark.textContentをそれぞれの関数呼び出し内の現在の算術演算に設定することもできます。

質問のJavaScriptは実際には何の算定も行いません。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <article> 
 
    <h1>Calculator</h1> 
 
    <input id="fn" type="number" placeholder="first number"> 
 
    <span id="mark"> + </span> 
 
    <input id="ln" type="number" placeholder="last number"> 
 
    <span id="e"> = </span> 
 
    <input id="re" type="number" value="0" placeholder="result"> 
 
    <br /> <br /> 
 
    <table> 
 
     <th><button type=button onclick="add()">add +</button></th> 
 
     <th><button type=button onclick="subtract()">subtract -</button></th> 
 
     <th><button type=button onclick="devide()">devide /</button></th> 
 
     <th><button type=button onclick="multiply()">multiply *</button></th> 
 
     <th><button type=button onclick="clear()">clear</button></th> 
 
    </table> 
 
    </article> 
 

 
    <p id="hint" style="background-color:yellow; display:inline"></p> 
 
    <script> 
 
    //setting up variables 
 
    var cc = "+", 
 
     ff, ll; 
 
    //setting up functions 
 
    var fn = document.getElementById("fn"); 
 
    var ln = document.getElementById("ln"); 
 
    var mark = document.getElementById("mark"); 
 
    var re = document.getElementById("re"); 
 
    var hint = document.getElementById("hint"); 
 

 
    function log() { 
 
     console.log(re.value); 
 
    } 
 
    //get function 
 
    function get() { 
 
     ff = fn.valueAsNumber; 
 
     ll = ln.valueAsNumber; 
 
    } 
 
    //add function 
 
    function add() { 
 
     get(); 
 
     cc = "+"; 
 
     hint.innerHTML = "ADD"; 
 
     mark.textContent = " " + cc + " "; 
 
     // do the math here 
 
     re.value = ff + ll; 
 
     log(); 
 
    } 
 
    //subtract function 
 
    function subtract() { 
 
     get(); 
 
     cc = "-"; 
 
     hint.innerHTML = "SUBTRACT"; 
 
     mark.textContent = " " + cc + " "; 
 
     re.value = ff - ll; 
 
     log(); 
 
    } 
 
    //devide function 
 
    function devide() { 
 
     get(); 
 
     cc = "/"; 
 
     hint.innerHTML = "DEVIDE"; 
 
     mark.textContent = " " + cc + " "; 
 
     re.value = ff/ll; 
 
     log(); 
 
    } 
 
    //multiply function 
 
    function multiply() { 
 
     get(); 
 
     cc = "*" 
 
     hint.innerHTML = "MULTIPLY"; 
 
     mark.textContent = " " + cc + " "; 
 
     re.value = ff * ll; 
 
     log(); 
 
    } 
 
    //clear function 
 
    function clear() { 
 
     hint.innerHTML = "CLEAR" 
 
     re.value = fn.value = ln.value = ""; 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>

出典

2017-08-06 16:56:50 guest271314

私が言っていることは、document.getElementById（ "re"）。value = ff + llはこのコードでは機能しないということです。計算や値の編集がうまくいかなかったかどうかを確認するために、後でこれを変更しました。 " –

@Itameio「うまくいかない」とはどういう意味ですか？ 'get（）'が最初に呼び出される限り、正しい結果が返されます。 – guest271314

@Itameio stacksnippetsのコードで何が「うまくいかないか」を記述できますか？ – guest271314

あなたがそう

document.getElementById("fn").value

を使用するときは、変数ffとllを追加する前にそれらを変換することを確認してください、あなたは文字列を取得することに注意する必要がありますfloat（またはint）。-演算子は、数値の引数を必要とするのであなたは、変換が暗黙的に行われている2番目の例では

re = parseFloat(ff) + parseFloat(ll);

または

re=ff - (-ll);

ような何かを行うことができます。 +演算子を使用すると、単純に2つの文字列値を連結します。

出典

2017-08-06 17:03:54 cars10m

ここには、追加機能を修正する例があります（JSFiddle）。あなただけ

function add() { 
    get(); 
    cc=="..." 
    document.getElementById("hint").innerHTML = "ADD"; 
    document.getElementById("re").value = ff + ll; 
    mark.innerHTML = cc; 
}

のようにそれを書く

if (cc=="..."){ 
... 
}

を必要としない

function add() { 
    var fn = document.getElementById("fn").value 
    var ln = document.getElementById("ln").value 
    document.getElementById("re").value = new Number(fn) + new Number(ln); 
}

出典

2017-08-06 17:04:10 user2243357

Answerで解決された無効なHTMLの問題はどこにありますか？ 'new Number（）'は必要ありません。 – guest271314

@ guest271314私はOPが上に構築できる簡単な例を作成しました。はい、OPのコードには問題がたくさんありました（たとえば、非閉じタグなど）、私はそれらを言及していました。あなたの例ははるかに完全です。あなたの 'new Number（）'については、不要なアサーションですが、何らかの型変換なしでJSFiddleでコードを実行すると、文字列の連結を取得できます（少なくとも私がやった）。入力フィールドがテキストとして扱われるため、毎回数値を取得するために、javascriptは動的なので、私はそれらを数種類または別のもの（たとえば、以下の 'parseFloat'など）にキャストします。 – user2243357

"SIMPLE"は相対的です。 ''には 'があります。valueAsNumber'プロパティ – guest271314

は

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
</head> 
 
<body> 
 
    <article> 
 
    <h1>Calculator</h1> 
 
    <input id="fn" type="number" placeholder="first number"> 
 
    <span id="mark"> + </span> 
 
    <input id="ln" type="number" placeholder="last number"> 
 
    <span id="e"> = </span> 
 
    <input id="re" type="number" value="0" placeholder="result"> 
 
    <br /> <br /> 
 
    <table> 
 
     <th><button type=button onclick="add()">add +</button></th> 
 
     <th><button type=button onclick="subtract()">subtract -</button></th> 
 
     <th><button type=button onclick="devide()">devide /</button></th> 
 
     <th><button type=button onclick="multiply()">multiply *</button></th> 
 
     <th><button type=button onclick="clea()">clear</button></th> 
 
    </table> 
 
    </article> 
 

 
    <script> 
 
    //setting up variables 
 
    var cc = "+", ff, ll; 
 
    //setting up functions 
 
    var mark = document.getElementById("mark"); 
 
    
 
    //get function 
 
    function get() { 
 
     ff = parseFloat(document.getElementById("fn").value); 
 
     ll = parseFloat(document.getElementById("ln").value); 
 
    } 
 
    //add function 
 
    function add() { 
 
     get(); 
 
     cc = "+"; 
 
     document.getElementById("hint").innerHTML = "ADD"; 
 
     document.getElementById("re").value = ff + ll; 
 
     mark.innerHTML = cc; 
 
    } 
 
    //subtract function 
 
    function subtract() { 
 
     get(); 
 
     cc = "-"; 
 
     document.getElementById("hint").innerHTML = "SUBTRACT"; 
 
     document.getElementById("re").value = ff - ll; 
 
     mark.innerHTML = cc; 
 
    } 
 
    //devide function 
 
    function devide() { 
 
     get(); 
 
     cc = "/"; 
 
     document.getElementById("hint").innerHTML = "DEVIDE"; 
 
     document.getElementById("re").value = ff/ll; 
 
     mark.innerHTML = cc; 
 
    } 
 
    //multiply function 
 
    function multiply() { 
 
     get(); 
 
     cc = "*"; 
 
     document.getElementById("hint").innerHTML = "MULTIPLY"; 
 
     document.getElementById("re").value = ff * ll; 
 
     mark.innerHTML = cc; 
 
    } 
 
    //clear function 
 
    function clea() { 
 
     document.getElementById("hint").innerHTML = "CLEAR" 
 
     document.getElementById("re").value = "" 
 
    } 
 
    </script> 
 

 
    <p id="hint" style="background-color:yellow; display:inline"></p> 
 
</body> 
 

 
</html>

0123それを試してみてください

出典

2017-08-06 17:15:29 ewwink

彼の関数は 'clea（）'ではなく 'clear（）'です：D – ewwink

それはあなたの前の答えを最適化し、今度は 'parseFloat'を使ってそれを最適化します：D – ewwink

なぜ私の変数が足りないのですか？

答えて

関連する問題