HTMLで1から指定した数までの合計を求めるページを作っています

前提・実現したいこと

ここに質問の内容を詳しく書いてください。

HTMLで1から指定した数までの合計を求めるページを作っています。
for文を使いましたが、1-10までのすべての数を足してほしいのに、そのまま
10だけが出てきます。等差数列を使えばlengthが使えるようになると思ってコピペしてみましたが、動きません。

発生している問題・エラーメッセージ

練習2.html:12 Uncaught TypeError: Array.spply is not a function
    at calcSum (練習2.html:12)
    at HTMLButtonElement.onclick (練習2.html:25)
calcSum @ 練習2.html:12
onclick @ 練習2.html:25

該当のソースコード

javascript
1<html>
2    <head>
3        <meta charset="UTF-8">
4        <script>
5            function calcSum(){
6                let max=document.getElementById("max").value;
7                let total=max;
8
9                let length=val;
10                let initial=0;
11                let diff=1;
12                let arr=Array.spply(null,new Array(length)).map(function(v,i){return initial+(i*diff);});
13                
14                for(let i=0; i<val.length;i++){
15                    sum+=val(i);
16                }
17                document.getElementById("val").textContent=max;
18                document.getElementById("sum").textContent=total;
19            }
20        </script>
21
22        <body>
23            <h2>1から<span id="val"></span>の合計は<span id="sum"></span></h2>
24            <input id="max"value=10>
25            <button onclick="calcSum()">合計</button>
26        </body>
27    </head>
28</html>

試したこと

sumをvalに書き換えること、let lengthからlet arrまで書き加えること。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答3件

ベストアンサー

わけもわからずコピペするのはやめましょう。

HTML文書は、以下の点がおかしい。

HTML文書の先頭に文書型定義(DOCTYPE)を書く。
html要素にlang属性を書く(日本語なら値は"ja")。
head要素にはtitle要素を書く。
head要素の終了タグの位置はbody要素より前。

スクリプトは、無理に配列を使わなくても、初期値0の変数に1～指定の値まで足していけば合計は計算できます。よくわからずにコピペして、applyをspplyと書き間違えるよりも、愚直にコードを書きましょう。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8">
5        <script>
6            function calcSum() {
7                let max = document.getElementById("max").value;
8                let total = 0;
9
10                for (let i = 0; i <= max; i++) {
11                    total += i;
12                }
13                document.getElementById("val").textContent = max;
14                document.getElementById("sum").textContent = total;
15            }
16        </script>
17        <title>合計を計算</title>
18    </head>
19    <body>
20        <h2>1から<span id="val"></span>の合計は<span id="sum"></span></h2>
21        <input id="max" value=10>
22        <button onclick="calcSum()">合計</button>
23    </body>
24</html>

投稿2020/10/07 13:29

Daregada

総合スコア11990

bot73145848

2020/10/07 13:41

動きました！等差数列など使わなくてもいけるんですね・・・コードを全文書いてくださりありがとうございます。時間があるときに、一つ一つのコードの意味を調べてみたいと思います。ご回答ありがとうございました。

Daregada

2020/10/07 13:54

forループを使わなくても、合計の公式「max * (max + 1) / 2」で一発で計算できますし、解決方法はひとつではありません。

bot73145848

2020/10/07 23:33

なるほど...ありがとうございます！

行動規範の内容に同意します

質問者様そのままでは構文エラーが発生していませんか？
(なにも表示されない)
<input>タグで書かれるなら下記の様に記入してみて下さい。
数値の入力欄を作成する
 一行テキストボックスを作成する

HTML
1<!-- 
2<input id="max"value=10>
3 -->
4<!-- こちらか -->
5<input type="number" id="max" min="2" max="100" value="10">
6<!-- こちら -->
7<input type="text" id="max" value="10">

投稿2020/10/07 13:24