Is there a more efficient way to write this?

Question

just working on a school project that my instructor came up with, supposed to be written in pseudocode but I'm taking it a step further and writing it in javascript/html to make a functional website. Basically, there's a hypothetical school with 9 grades, 3 classrooms per grade, and 9 months per class. I'm supposed to write a pseudocode script for how to generate a bill for each of the classrooms - kindergarten is $80 per month, the remaining classes are $60 per month up to 8th grade.

Anyways, I'm curious if there's a better way to write this code and list the bill for each month - the way the instructor laid out the code, I'd have to write this 27 times (3 per classroom times 9 grades) with kindergarten being $80 per month and the rest of the classes being $60 per month. Here's what I have so far:

<body>
    <script>
        var x = 0;
        var y = 1;
        var i;
        var theMonths = ["January", "February", "March", "April", "May",
            "June", "July", "August", "September"];

        function javascript() {
            for (i = 0; i < 10; i++) {
                document.getElementById("td1").innerHTML += theMonths[0];
                document.getElementById("td2").innerHTML += theMonths[1];
                document.getElementById("td3").innerHTML += theMonths[3];
                document.getElementById("td4").innerHTML += theMonths[4];
                document.getElementById("td5").innerHTML += theMonths[5];
                document.getElementById("td6").innerHTML += theMonths[6];
                document.getElementById("td7").innerHTML += theMonths[7];
                document.getElementById("td8").innerHTML += theMonths[8];
                document.getElementById("td1a").innerHTML += "$60";
                document.getElementById("td2a").innerHTML += "$60";
                document.getElementById("td3a").innerHTML += "$60";
                document.getElementById("td4a").innerHTML += "$60";
                document.getElementById("td5a").innerHTML += "$60";
                document.getElementById("td6a").innerHTML += "$60";
                document.getElementById("td7a").innerHTML += "$60";
                document.getElementById("td8a").innerHTML += "$60";
                return false;
            }
        }
    </script>
    <div id="demoDiv">
        <p id="demo">Your coupons:</p>
        <table>
            <tr>
                <th scope="col">Month:</th>
                <th scope="col">Price:</th>
            </tr>
            <tr>
                <td id="td1"></td>
                <td id="td1a"></td>
            </tr>
            <tr>
                <td id="td2"></td>
                <td id="td2a"></td>
            </tr>
            <tr>
                <td id="td3"></td>
                <td id="td3a"></td>
            </tr>
            <tr>
                <td id="td4"></td>
                <td id="td4a"></td>
            </tr>
            <tr>
                <td id="td5"></td>
                <td id="td5a"></td>
            </tr>
            <tr>
                <td id="td6"></td>
                <td id="td6a"></td>
            </tr>
            <tr>
                <td id="td7"></td>
                <td id="td7a"></td>
            </tr>
            <tr>
                <td id="td8"></td>
                <td id="td8a"></td>
            </tr>
        </table>
    </div>
    <input type="button" value="Go!" onclick="javascript();" />
</body>

Is there a way to simplify this so I don't have to copy/paste everything 27 times and make 27 individual tables with different ID's for the td items?

If you can solve this for me - you're awesome :D

Answer 1

You can use for as follow to populate the data in the table

The variables x and y are not used at all, removed them
Removed return false; from for which was causing the loop to run only once and then return control from function
Used the loop variable i to get the dynamic sequential ID of the elements and the corresponding element from array
Removed += from innerHTML to prevent from adding repetitive data on button click
Used the hard-coded value 8 to loop over all the elements, should be dynamic and equal to the length of array.

Demo

var theMonths = ["January", "February", "March", "April", "May",
    "June", "July", "August", "September"];

function javascript() {
    for (var i = 0; i < 8; i++) {
        document.getElementById("td" + (i + 1)).innerHTML = theMonths[i];

        document.getElementById("td" + (i + 1) + "a").innerHTML = "$60";
    }
}

Answer 2

I didn't really what you're supposed to do, so I'll just address what you are actually doing. Absent some other input, I don't see the point of the button, so I've just moved the script below the DOM elements that you want to modify, and am generating the repetitious columns.

<body>
    <div>
        <p> Your coupons: </p>
        <table>
          <tbody id=demoTable>
            <tr>
                <th scope="col"> Month: </th>
                <th scope="col"> Price: </th>
            </tr>
          </tbody>
        </table>
    </div>
    <script>
      (function() {
        function td(text) {
          var column = document.createElement('td')
          column.textContent = text
          return column
        }

        var table = document.getElementById('demoTable'),
            months = 
              [ "January", "February", "March", "April", "May",
                "June", "July", "August", "September" ]
        months.forEach(function(month) {
          var row = document.createElement('tr')
          row.appendChild(td(month))
          row.appendChild(td('$60'))
          table.appendChild(row)
        })
      })()
    </script>
</body>

Is there a more efficient way to write this?

Question

2 answers

solution1
4 ACCPTED 2015-10-19 03:42:20

solution2
2 2015-10-19 04:01:45

Is there a more efficient way to write this?

Question

2 answers

solution1 4 ACCPTED 2015-10-19 03:42:20

solution2 2 2015-10-19 04:01:45

solution1
4 ACCPTED 2015-10-19 03:42:20

solution2
2 2015-10-19 04:01:45