テーブル要素の算術計算を行う

いくつかの値が（111.36のように）あらかじめ設定されていますが、数値で数式を実行しようとすると、何も表示されません。

はご協力いただきありがとうございます、（Javascriptので新）マルク・

function calculate_it() { 
 

 
    window.alert("In function calculate_it"); 
 

 
    var x = document.getElementByID("Numb01").value; 
 
    window.alert(x); 
 

 
    } //end function

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <TITLE>Javascript Table</TITLE> 
 
    <link href="style.css" type="text/css" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 

 
    <h3>A demonstration of calculators</h3> 
 

 
    <table id="t01"> 
 
    <caption>Chek this out!</caption> 
 

 
    <tr> 
 
     <th>Date</th> 
 
     <th>Number 1</th> 
 
     <th>Number 2</th> 
 
     <th>Number 3</th> 
 
     <th>Number 4</th> 
 
    </tr> 
 

 
    <tr> 
 
     <td> 
 
     <input type="text" id="Date01" value="WED21DEC16" size="10" /> 
 
     </td> 
 
     <td> 
 
     <input type="number" id="Numb01" value=111.36 size="5" /> 
 
     </td> 
 
     <td> 
 
     <input type="number" id="Numb02" value=222.36 size="5" /> 
 
     </td> 
 
     <td> 
 
     <input type="number" id="Numb03" value=333.36 size="5" /> 
 
     </td> 
 
     <td> 
 
     <input type="number" id="Numb04" value=444.36 size="5" /> 
 
     </td> 
 
    </tr> 
 

 

 
    <tr> 
 
     <td> 
 
     <input type="text" id="Date02" value="WED22DEC16" size="10" /> 
 
     </td> 
 
     <td> 
 
     <input type="number" id="Numb05" value=555.36 size="5" /> 
 
     </td> 
 
     <td> 
 
     <input type="number" id="Numb06" value=666.36 size="5" /> 
 
     </td> 
 
     <td> 
 
     <input type="number" id="Numb07" value=777.36 size="5" /> 
 
     </td> 
 
     <td> 
 
     <input type="number" id="Numb08" value=888.36 size="5" /> 
 
     </td> 
 
    </tr> 
 

 

 
    <TR> 
 
     <td height="20" ColSpan="5"></td> 
 
    </TR> 
 

 
    <TR> 
 
     <td height="20" ColSpan="2"></td> 
 
     <td ColSpan="2" class='alnright'>Multiply:</td> 
 
     <td> 
 
     <input type="text" id="ActionMulti" value="" size="5" /> 
 
     </td> 
 
    </TR> 
 

 
    <TR> 
 
     <td height="20" ColSpan="2"></td> 
 
     <td ColSpan="2" class='alnright'>Add:</td> 
 
     <td> 
 
     <input type="text" id="ActionAdd" value="" size="5" /> 
 
     </td> 
 
    </TR> 
 

 
    <TR> 
 
     <td height="20" ColSpan="2"></td> 
 
     <td ColSpan="2" class='alnright'>Percentage:</td> 
 
     <td> 
 
     <input type="text" id="ActionPercentage" value="" size="5" /> 
 
     </td> 
 
    </TR> 
 

 
    <TR> 
 
     <td height="20" ColSpan="2"></td> 
 
     <td ColSpan="2" class='alnright'>----------</td> 
 
     <td>--------</td> 
 
    </TR> 
 

 
    <TR> 
 
     <td height="20" ColSpan="2"></td> 
 
     <td ColSpan="2" class='alnright'>Sum:</td> 
 
     <td> 
 
     <input type="text" id="Sum" value="" size="5" /> 
 
     </td> 
 
    </TR> 
 

 
    </table> 
 
    <br> 
 

 
    <p>Click the button to calculate the data</p> 
 
    <button type="button" onclick="calculate_it()">calculate_it</button> 
 

 
</body> 
 

 
</html>

出典

2016-12-23 MarcJ

正しい機能は、 '' getElementByIdを（idName）です。 –

ありがとうございます。私は本当の初心者です.var x = getElementByID（ "Numb01"）; window.alert（x）; – MarcJ

ポップアップアラートが表示されない – MarcJ

まあ、私はあなたがすでに同じことを言って、すべてのコメントを読んで推測：それはgetElementByIdないgetElementByIDです。 JavaScript は大文字と小文字が区別されますです。

ストアアレイ内のすべての入力（番号）の値：あなたがsuccessfulyあなたのコードを実行するために行うために必要なもの

は、単純な2つのことです。
multiply,sumおよびpercentageの結果を簡単に取得するには、reduce関数を使用します。例えば

：

function calculate_it() { 
    var inputs = document.querySelectorAll('input[type="number"]'); 
    var multiply = 0; 
    var add = 0; 
    var percentage = 0; 

    // get the values of each input, map then and return 
    // a new array with the parsed numbers 
    var numbers = [].map.call(inputs, function (i) { 
    return parseFloat(i.value); 
    }); 

    multiply = numbers.reduce(function (n1, n2) { 
    return n1 * n2; 
    }); 
    add = numbers.reduce(function (n1, n2) { 
    return n1 + n2; 
    }); 
    percentage = numbers.reduce(function (n1, n2) { 
    return (n1/n2) * 100; 
    }); 

    document.getElementById('ActionMulti').value = multiply.toFixed(2); 
    document.getElementById('ActionAdd').value = add.toFixed(2); 
    document.getElementById('ActionPercentage').value = percentage.toFixed(2); 
    document.getElementById('Sum').value = (multiply + add + percentage).toFixed(2); 
}

toFixed

Numberのクラスは、引数として渡された小数点以下の最大numnerと数の文字列表現を返します。それは必要な場合に丸め（古典的なラウンド）メソッドです。

フル例

function calculate_it() { 
 
    var inputs = document.querySelectorAll('input[type="number"]'); 
 
    var multiply = 0; 
 
    var add = 0; 
 
    var percentage = 0; 
 
    
 
    // get the values of each input, map then and return 
 
    // a new array with the parsed numbers 
 
    var numbers = [].map.call(inputs, function (i) { 
 
    \t return parseFloat(i.value); 
 
    }); 
 
    
 
    multiply = numbers.reduce(function (n1, n2) { 
 
    return n1 * n2; 
 
    }); 
 
    add = numbers.reduce(function (n1, n2) { 
 
    return n1 + n2; 
 
    }); 
 
    percentage = numbers.reduce(function (n1, n2) { 
 
    \t return (n1 * n2)/100; 
 
    }); 
 
    
 
    document.getElementById('ActionMulti').value = multiply.toFixed(2); 
 
    document.getElementById('ActionAdd').value = add.toFixed(2); 
 
    document.getElementById('ActionPercentage').value = percentage.toFixed(8); 
 
    document.getElementById('Sum').value = (multiply + add + percentage).toFixed(2); 
 
}

input { 
 
    width: 100%; 
 
}

<h3>A demonstration of calculators</h3> 
 

 
<table id="t01"> 
 
    <caption>Chek this out!</caption> 
 

 
    <tr> 
 
    <th>Date</th> 
 
    <th>Number 1</th> 
 
    <th>Number 2</th> 
 
    <th>Number 3</th> 
 
    <th>Number 4</th> 
 
    </tr> 
 

 
    <tr> 
 
    <td> 
 
     <input type="text" id="Date01" value="WED21DEC16" size="10" /> 
 
    </td> 
 
    <td> 
 
     <input type="number" id="Numb01" value=11.36 size="5" /> 
 
    </td> 
 
    <td> 
 
     <input type="number" id="Numb02" value=12.36 size="5" /> 
 
    </td> 
 
    <td> 
 
     <input type="number" id="Numb03" value=7.36 size="5" /> 
 
    </td> 
 
    <td> 
 
     <input type="number" id="Numb04" value=4.36 size="5" /> 
 
    </td> 
 
    </tr> 
 

 

 
    <tr> 
 
    <td> 
 
     <input type="text" id="Date02" value="WED22DEC16" size="10" /> 
 
    </td> 
 
    <td> 
 
     <input type="number" id="Numb05" value=8.36 size="5" /> 
 
    </td> 
 
    <td> 
 
     <input type="number" id="Numb06" value=6.36 size="5" /> 
 
    </td> 
 
    <td> 
 
     <input type="number" id="Numb07" value=10.36 size="5" /> 
 
    </td> 
 
    <td> 
 
     <input type="number" id="Numb08" value=8.36 size="5" /> 
 
    </td> 
 
    </tr> 
 

 

 
    <TR> 
 
    <td height="20" ColSpan="5"></td> 
 
    </TR> 
 

 
    <TR> 
 
    <td height="20" ColSpan="2"></td> 
 
    <td ColSpan="2" class='alnright'>Multiply:</td> 
 
    <td> 
 
     <input type="text" id="ActionMulti" value="" size="5" /> 
 
    </td> 
 
    </TR> 
 

 
    <TR> 
 
    <td height="20" ColSpan="2"></td> 
 
    <td ColSpan="2" class='alnright'>Add:</td> 
 
    <td> 
 
     <input type="text" id="ActionAdd" value="" size="5" /> 
 
    </td> 
 
    </TR> 
 

 
    <TR> 
 
    <td height="20" ColSpan="2"></td> 
 
    <td ColSpan="2" class='alnright'>Percentage:</td> 
 
    <td> 
 
     <input type="text" id="ActionPercentage" value="" size="5" /> 
 
    </td> 
 
    </TR> 
 

 
    <TR> 
 
    <td height="20" ColSpan="2"></td> 
 
    <td ColSpan="2" class='alnright'>----------</td> 
 
    <td>--------</td> 
 
    </TR> 
 

 
    <TR> 
 
    <td height="20" ColSpan="2"></td> 
 
    <td ColSpan="2" class='alnright'>Sum:</td> 
 
    <td> 
 
     <input type="text" id="Sum" value="" size="5" /> 
 
    </td> 
 
    </TR> 
 

 
</table> 
 
<br> 
 

 
<p>Click the button to calculate the data</p> 
 
<button type="button" onclick="calculate_it()">calculate_it</button>

出典

2016-12-23 02:45:25

テーブル要素の算術計算を行う

答えて

関連する問題