javascript、jQueryを活用して九九を作成

前提・実現したいこと

javascript、jQuery初学者です。
javascript、jQueryを活用して九九を作成したいです。

今やろうとしている事は、
td要素にidをそれぞれ　num_１～num_８１　という風につけていき、
それらのidに九九の値を入れていくという内容です。

９の段までで、なおかつ変数iが９になったときには
変数iを１にリセット・numに１を足し２の段、３の段…と作っていきたいです。
かなりめちゃくちゃになっているかと思いますが、どうかお力を貸してください…。

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

・そもそも実行されません。$(document).ready(function(… の使い方が間違っているのでしょうか？

・for文で　【Uncaught SyntaxError: Unexpected token '<='】 と出ているのですがなぜなのでしょうか？

・$("#num_[sum]")　の[sum]は数値として認識されていますか？文字列として認識されているのでしょうか…？

該当のソースコード

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
        var num = 1;
        var sum = 1;
        
        function Element_maker() {
            
        //各tdにIDを振っていく
            $("td").each(function(x) {
            $(this).attr("id", "num_" + (x + 1));
        });
        
        //num_[sum]に九九をそれぞれ入れていく  
        for(var i = 1, i <= 9, i++){
            //最大９の段まで　＆ *9まで
         if(i === 9 && num <= 9) {
        $("#num_[sum]").html(num + "*" + i "=" (num * i)); 
        num++;
        sum++;
        i = 0;
        
        } else {
        $("#num_[sum]").html(num + "*" + i "=" (num * i)); 
        sum++;
        }
        }
        }
        
        $(document).ready(function() {
        Element_maker();
        });
        
    </script>
    </head>
    <body>
        <table id="matrix">
            <caption>九九表</caption>
            <tr id="line_1">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr id="line_2">
                <td></td>
                <td></td>
            ------中略-------
                <td></td>
            </tr>
            <tr id="line_9">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </body>
</html>

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

エディタはcloud9を使用しています。

shinoharat

2021/03/12 05:08

javascript のインデントが整っていないため読みづらいです。整形ツールなどで整えてもらえませんか？ https://tools.m-bsys.com/development_tooles/jsbeautifier.php

toshikun_sk

2021/03/13 07:36

当方html初心者ですがguchinoooさんのコードで勉強させてもらったので書き逃げします。以下のようなコードで九九表の作成に成功しました。 ```html <body> <table> <caption>九九表</caption> <tr id="line_1"> </tr> <tr id="line_2"> </tr> <tr id="line_3"> </tr> <tr id="line_4"> </tr> <tr id="line_5"> </tr> <tr id="line_6"> </tr> <tr id="line_7"> </tr> <tr id="line_8"> </tr> <tr id="line_9"> </tr> </table> <script> function Element_maker() { //各tdにIDを振っていく $("td").each(function(x) { $(this).attr("id", "num_" + (x + 1)); }); //num_[sum]に九九をそれぞれ入れていく for(var i = 1;i <= 9; i++){ //最大９の段まで　＆ *9まで var kukutable = ""; for(var j = 1; j <= 9; j++){ kukutable += "<td> " + j + "×" + i + "=" + (i * j) + "</td>\n"; } $('#line_' + i).html(kukutable); } } $(document).ready(function() { Element_maker(); }); </script> </body> ``` $('#line_' + i).html(kukutable);　の部分エレメントを変数を使って指定するのは意外と簡単な方法でできました。参考にしてみてください。 https://tacosvilledge.hatenablog.com/entry/2018/05/11/140154

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

回答4件

結果に対するアプローチの方向が間違っていると思いますが、現状文法的に問題なのは
１．for文の記述方法が誤っています。,ではなく;を使いましょう。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for

２．html(num + "*" + i "=" (num * i))の"=" の左右にも+を追加しましょう。
３．$("#num_[sum]")のsumを変数展開させたないならバッククオートを使いましょう