/    Sign up×
Community /Pin to ProfileBookmark

Simple code, weird error

I created a simple code but it doesn’t work and I can’t figure why. Any help is greatly appreciated.
The code is supposed to create a dynamic table with the number of rows and columns taken from the user’s input and populate it with the simple algorithm. Each row should look like that: 1.1 1.2 1.3 … 1.5 where the increment is happening only after the decimal point so the second row would look like that: 2.1 2.2 2.3 … 2.5
HTML:
`<form>
<fieldset>
<label for=”nRows”>
Select number of rows:
</label>
<select id=”rows” name=”rows” tabindex=”1″>
<option value=”01″>01</option>
<option value=”02″>02</option>
<option value=”03″>03</option>
<option value=”04″>04</option>
<option value=”05″>05</option>
</select>
<label for=”nColumns”>
Select number of columns:
</label>
<select id=”columns” name=”columns” tabindex=”3″>
<option value=”01″>01</option>
<option value=”02″>02</option>
<option value=”03″>03</option>
<option value=”04″>04</option>
<option value=”05″>05</option>
</select>
</fieldset>
<input id=”submit” name=”Submit1″ tabindex=”5″ type=”submit” value=”Create Table” >
<input id=”reset” name=”Reset1″ tabindex=”7″ type=”reset” value=”Clear values”>
<script src=”Myscript.js”></script>
`

And the JavaScript to go with it:
`function createTable() {
var table = ”;
var r;
var c;
var incr = c * 0.1;
var rowN = parseInt(document.getElementById(“rows”).value);
var colN = parseInt(document.getElementById(“columns”).value);
for (r = 1; r <= rowN; r++) {
table += ‘<tr>’;
for (c = 1; c <= colN; c++) {
table += ‘<td>’ + (c + incr) + ‘</td>’;
}
table += ‘</tr>’;
}
document.getElementByID(‘table’).innerHTML = ‘<table border=1 >’ + table + ‘</table>’;
}
document.getElementById(“submit”).addEventListener(“onclick”, createTable, false);`

to post a comment
HTMLJavaScript

9 Comments(s)

Copy linkTweet thisAlerts:
@daveyerwinJun 19.2020 — this won't get you a good grade

on your home work but ...
``<i>
</i>
&lt;form id=frm&gt;
&lt;fieldset&gt;
&lt;label for="rows"&gt;
Select number of rows:
&lt;/label&gt;
&lt;select id="rows" tabindex="1"&gt;
&lt;option value="01"&gt;01&lt;/option&gt;
&lt;option value="02"&gt;02&lt;/option&gt;
&lt;option value="03"&gt;03&lt;/option&gt;
&lt;option value="04"&gt;04&lt;/option&gt;
&lt;option value="05"&gt;05&lt;/option&gt;
&lt;/select&gt;
&lt;label for="columns"&gt;
Select number of columns:
&lt;/label&gt;
&lt;select id="columns" tabindex="3"&gt;
&lt;option value="01"&gt;01&lt;/option&gt;
&lt;option value="02"&gt;02&lt;/option&gt;
&lt;option value="03"&gt;03&lt;/option&gt;
&lt;option value="04"&gt;04&lt;/option&gt;
&lt;option value="05"&gt;05&lt;/option&gt;
&lt;/select&gt;
&lt;/fieldset&gt;
&lt;input tabindex="5" type="submit" value="Create Table" &gt;
&lt;input tabindex="7" type="reset" value="Clear values"&gt;
&lt;/form&gt;
&lt;script&gt;
function createTable() {
var t = '';
var r;
var c;
var rowN = parseInt(rows.value);
var colN = parseInt(columns.value);
for (r = 1; r &lt;= rowN; r++) {
t += '&lt;tr&gt;';
for (c = 1; c &lt;= colN; c++) {
t += '&lt;td&gt;' + (r + "." + c) + '&lt;/td&gt;';
}
t += '&lt;/tr&gt;';
}
t = "&lt;table&gt;" + t + "&lt;/table&gt;";
document.write(t);
}
frm.onsubmit=createTable;
&lt;/script&gt;<i>
</i>
``
Copy linkTweet thisAlerts:
@KeverJun 19.2020 — Your code isn't working because .addEventListener should be given the event name without the 'on' part.
document.getElementById("submit").addEventListener("click", createTable, false);

Another problem is that you are using a submit button, which reloads the page unless you prevent that action. Because you're not submitting to a server, I would just change it to a regular button.

You also have a typo in this line:
document.getElementByID('table')
Copy linkTweet thisAlerts:
@PyreweldauthorJun 19.2020 — @DaveyErwin#1619673 I can't reuse your code because how I've designed my HTML page (not all the code is in the original post) but you did help to understand the problem. Thanks!
Copy linkTweet thisAlerts:
@PyreweldauthorJun 19.2020 — @Kever#1619675 Thanks a lot!
Copy linkTweet thisAlerts:
@daveyerwinJun 19.2020 — I added prevent default and replaced

document write with innerHTML

for better functionality and compatibility

still not suitable for home work ...
``<i>
</i>
&lt;form id=frm&gt;
&lt;fieldset&gt;
&lt;label for=rows&gt;
Select number of rows:
&lt;/label&gt;
&lt;select id=rows tabindex=1&gt;
&lt;option value=01&gt;01&lt;/option&gt;
&lt;option value=02&gt;02&lt;/option&gt;
&lt;option value=03&gt;03&lt;/option&gt;
&lt;option value=04&gt;04&lt;/option&gt;
&lt;option value=05&gt;05&lt;/option&gt;
&lt;/select&gt;
&lt;label for=columns&gt;
Select number of columns:
&lt;/label&gt;
&lt;select id=columns tabindex=3&gt;
&lt;option value=01&gt;01&lt;/option&gt;
&lt;option value=02&gt;02&lt;/option&gt;
&lt;option value=03&gt;03&lt;/option&gt;
&lt;option value=04&gt;04&lt;/option&gt;
&lt;option value=05&gt;05&lt;/option&gt;
&lt;/select&gt;
&lt;/fieldset&gt;
&lt;input tabindex=5 type=submit value="Create Table" &gt;
&lt;input tabindex=7 type=reset value="Clear values"&gt;
&lt;/form&gt;
&lt;div&gt;Table Displayed Below&lt;/div&gt;
&lt;div id=display&gt;&lt;/div&gt;
&lt;script&gt;
function createTable(e) {
e.preventDefault();
var t = '';
var r;
var c;
var rowN = parseInt(rows.value);
var colN = parseInt(columns.value);
for (r = 1; r &lt;= rowN; r++) {
t += '&lt;tr&gt;';
for (c = 1; c &lt;= colN; c++) {
t += '&lt;td&gt;' + (r + "." + c) + '&lt;/td&gt;';
}
t += '&lt;/tr&gt;';
}
t = "&lt;table&gt;" + t + "&lt;/table&gt;";
display.innerHTML=t;
}
frm.onsubmit=createTable;
&lt;/script&gt;<i>
</i>
``
Copy linkTweet thisAlerts:
@PyreweldauthorJun 19.2020 — @DaveyErwin#1619685 Thanks again! I need to develop my code for a couple of reasons: 1) the JavaScript file needs to be separate, 2) I would rather develop my own style of programming instead of copying somebody's else ready solution even though we were told that "code refactoring" is a thing. Oh, and I have to use the .innerHTML even though I found a much cleaner solutions that use .appendChild, You did help with my logic, don't get me wrong and for that I am very grateful.
Copy linkTweet thisAlerts:
@daveyerwinJun 19.2020 — @Pyreweld#1619699 said ...

"the JavaScript file needs to be separate,"

simply cut every thing between script tags

and paste it in a file, add src attribute to script tag

it works Exactly the same in a separate file

as it does in the HTML file

A good general rule of JavaScript programming is

use innerHTML as if it were "Read Only" .

Never use it to add html.
Copy linkTweet thisAlerts:
@PyreweldauthorJun 19.2020 — @DaveyErwin#1619701 I am not familiar with the event.preventDefault() I just red about on the w3schools but I want to avoid using it.
Copy linkTweet thisAlerts:
@PyreweldauthorJun 19.2020 — After all the suggestions I've got it working. Many thanks!
×

Success!

Help @Pyreweld spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...