I cannot figure out why my code continues to run even though it appears to have completely loaded the proper HTML. This problem only appears in Firefox (using ver. 3.5.3) and not in IE. This is just a simple script to display a multiplication table with a few decorative effects mixed in.
<html>
<head>
<title>Multiplication Table</title>
<script>
function drawTable(){
var rb = document.configForm.rowBegin.value - 1;
var re = document.configForm.rowEnd.value;
var cb = document.configForm.colBegin.value - 1;
var ce = document.configForm.colEnd.value;
document.write("Perfect squares are highlighted in red.<p>");
document.write("<table border=\"1\">");
for(i = rb; i <= re; i++){
document.write("<tr>");
for(j = cb; j <= ce; j++){
if(i == rb && j == cb){
// ignore top left corner
document.write("<td bgcolor=\"#ffffff\"></td>");
}
else if(i == rb){
// to display the column headers
if(j % 2 == 0)
document.write("<td align=\"center\" bgcolor=\"#99d9e0\">" + j + "</td>");
else
document.write("<td align=\"center\">" + j + "</td>");
}
else if(j == cb){
// to display the row headers
if(j % 2 == 0)
document.write("<td align=\"center\" bgcolor=\"#99d9e0\">" + i + "</td>");
else
document.write("<td align=\"center\">" + i + "</td>");
}
else{
// writes the solutions to the table
if(i == j || Math.sqrt(i*j) % 1 == 0)
// highlight the perfect squares
document.write("<td align=\"center\" bgcolor=\"#ff8080\">" + i * j + "</td>");
else if(j % 2 == 0)
document.write("<td align=\"center\" bgcolor=\"#99d9e0\">" + i * j + "</td>");
else
document.write("<td align=\"center\">" + i * j + "</td>");
}
}
document.write("</tr>");
}
document.write("</table>");
}
</script>
</head>
<body>
<h2>Multiplication Table</h2>
<form name="configForm">
Row Range:</br>
Begin <input type="text" name="rowBegin" size="5">
End <input type="text" name="rowEnd" size="5">
<p>
Column Range:</br>
Begin <input type="text" name="colBegin" size="5">
End <input type="text" name="colEnd" size="5">
<p>
<input type="Submit" value="Make Table" onclick="return drawTable()">
</form>
</body>
</html>
If you use document.write() you need to use document.close(); to tell the browser you are done.
Using something like alert(); can also stop the spinner from spinning but that isn't likely what you want.
add document.close(); to the end of the function. It appears that Firefox doesn't realize that you're done writing.
Related
I want to convert this simple code that shows a multiplication table from java script ( using notepad++) to asp.net ( using visual studio// web form )
<!DOCTYPE html>
<html>
<head>
<meta charset="windows-1252">
</head>
<body>
<script>
document.write("<table border=\"1px\">");
var i, j;
for (i = 1; i <= 12; i++) {
document.write("<tr><th colspan=\"5\">Table" + " " + i + "</th></tr>");
for (j = 1; j <= 12; j++)
document.write("<tr><td>" + i + "</td>"+"<td>*</td>"+"<td>" + j + "</td>"+"<td>=</td>"+"<td>" + i * j + "</td></tr>");
}
document.write("</table>");
</script>
</body>
</html>
I'm a beginner! I started to study javascript, but there is an error what I can't find a way to solve it.
Uncaught TypeError: Cannot read property 'value' of undefined
at correct (homework.jsp:50)
at HTMLInputElement.onclick (homework.jsp:63)
It happens when I put the 'done' button. I wanted to get a value from a form. But the value is always 'undefined' and I couldn't change it to Number or String. Maybe I failed from getting the value. Could you kindly help me?
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<h2>Homework</h2>
<form name="gugu">
<script type="text/javascript">
//How many questions?
var size=eval(window.prompt("How many questions?"));
var a=new Array(size);
var b=new Array(size);
var ans=new Array(size);
var rst=new Array(size);
var count=0;
//Start
gugugu();
function gugugu() {
document.write("<table border='1'>");
for (var i=0; i<size+1; i++) {
if(i<size) {
document.write("<tr>");
document.write("<td>");
a[i]=parseInt(Math.random()*9)+1;
b[i]=parseInt(Math.random()*9)+1;
rst[i]=a[i]*b[i];
document.write(a[i]+"*"+b[i]+"=");
document.write("</td>");
document.write("<td>");
//I can't get the value!
var str="<input type='text' name='"+i+"'>";
document.write(str);
document.write("</td>");
document.write("</tr>");
} else {
document.write("<tr>");
document.write("<td colspan='2' align='center'>");
document.write("<input type='button' value='done' onclick='correct()'>");
document.write("<input type='button' value='reset' onclick='reset()'>");
document.write("</td>");
document.write("</tr>");
}
}
document.write("</table>");
document.write("count : ");
document.write("<input type='text' value='' name='count' readonly>");
document.write("<br>");
document.write("note : ");
document.write("<input type='text' value='' name='note' readonly>");
}
function correct() {
for (var i=0; i<size;i++) {
//Here I tried putting values into an Array, but 'undefined' happens!
ans[i]=String(document.gugu.i.value);
document.write(typeof(ans[i])+","+rst[i]+"<br>");
if(ans[i]==rst[i]) {
count=count+1;
}
}
document.gugu.count.value=eval(count);
document.gugu.note.value=eval(count*10);
}
function reset() {
clear();
gugugu();
}
</script>
</form>
"gugu" its the form name, document.gugu is undefined, because its not a global variable, to get the form: document.getElementsByName("gugu");
ans[i]=String(document.gugu.i.value);
then after getting the form (in an HTMLElement[] type), you are trying to get a row?, you cant do FORM.i, "i" has no context here, access it from the array ans[], this way you can get the value from the input by their name (numbers you set as name):
ans[i] = String(document.getElementsByName("" + i)[0].values[i]);
So with a few changes here and there this works:
<h2>Homework</h2>
<form name="gugu">
<script type="text/javascript">
//How many questions?
var size = eval(window.prompt("How many questions?"));
var a = new Array(size);
var b = new Array(size);
var ans = new Array(size);
var rst = new Array(size);
var count = 0;
//Start
gugugu();
function gugugu() {
document.write("<table border='1'>");
for (var i = 0; i < size + 1; i++) {
if (i < size) {
document.write("<tr>");
document.write("<td>");
a[i] = parseInt(Math.random() * 9) + 1;
b[i] = parseInt(Math.random() * 9) + 1;
rst[i] = a[i] * b[i];
document.write(a[i] + "*" + b[i] + "=");
document.write("</td>");
document.write("<td>");
var str = "<input type='text' name='in" + i + "'>";
document.write(str);
document.write("</td>");
document.write("</tr>");
} else {
document.write("<tr>");
document.write("<td colspan='2' align='center'>");
document.write("<input type='button' value='done' onclick='correct()'>");
document.write("<input type='button' value='reset' onclick='reset()'>");
document.write("</td>");
document.write("</tr>");
}
}
document.write("</table>");
document.write("count : ");
document.write("<input type='text' value='' name='count' readonly>");
document.write("<br>");
document.write("note : ");
document.write("<input type='text' value='' name='note' readonly>");
}
function correct() {
console.log("correct");
for (var i = 0; i < size; i++) {
ans[i] = parseInt(document.getElementsByName("in" + i)[0].value);
console.log(ans[i]);
console.log(rst[i]);
if (ans[i] === rst[i]) {
count = count + 1;
}
}
console.log(count);
document.getElementsByName("count")[0].value = count;
document.getElementsByName("note")[0].value = (count * 10);
}
function reset() {
clear();
gugugu();
}
</script>
</form>
I think you can't access html elements like this document.something. Check this to see the different ways to access html elements using JavaScript.
I'm building a memory game in HTML & JS where you guess 2 different images and try to pick 2 same ones.
I'm stuck with putting an onclick function to a hidden image.
Here is my code so ill try to explain better...
var table = '';
for(var i = 0; i < 4; i++){
table += '<tr>';
for(var j = 0; j < 3; j++){
table += '<td align="center"><img src="./pics/image_part_00' + Math.floor((Math.random() * 6) + 1) + '.jpg";" width="100px"" onclick="clicked(this);" style="visibility: hidden;"></td>';
}
table += '</tr>';
}
document.getElementById('theGame').innerHTML = '<table border=1 cellpadding="10" class="tabela1">' + table + '</table>'
Now what im trying to do is to overwrite that visibility: hidden; so the image is visible when clicked....
And here is the function
function clicked(element){
element.style.visibility = "visible";
}
but it doesn't work because with that element.style.visibility im changing the visibility of a table cell.
Anyone got a solution? I'm probably missing something and can't figure it...
NOTE: It's a school assignment so it has to be in a table.
Here is a some fixed javascript. when you catch onclick event, it won't work on hidden elements. So I move event listener onto td:
var table = '';
for(var i = 0; i < 4; i++){
table += '<tr>';
for(var j = 0; j < 3; j++){
table += '<td align="center" onclick="click_it(this)">
<img src="./pics/image_part_00' + Math.floor((Math.random() * 6) + 1) + '.jpg"
width="100px" style="visibility: hidden"></td>';
}
table += '</tr>';
}
document.getElementById('theGame').innerHTML = '<table border=1 cellpadding="10" class="tabela1">' + table + '</table>';
function click_it(cell){
var image = cell.children[0];
image.style.visibility = 'visible';
}
You can search for the img child of the table cell
var child = element.childNodes;
The var child will return an array of elements, then you just need to access to the position that the is, and change the visibility attribute:
child[1].style.visibility = "visible";
You can try below,
just played a trick to match element id dynamically
to make it visible.
Added on click to td instead of image.
added id to image.
here is the code
<div id="theGame">
var table = '';
for (var i = 0; i < 4; i++) {
table += '<tr>';
for (var j = 0; j < 3; j++) {
table += '<td align="center" onclick="clicked(' + j + ')"> <img id=img_' + j + ' src="./pics/image_part_00' + Math.floor((Math.random() * 6) + 1) + '.jpg;" width="100px" style="visibility: hidden;"> </td>';
}
table += '</tr>';
}
document.getElementById('theGame').innerHTML = '<table border=1 cellpadding="10" class="tabela1">' + table + '</table>'
function clicked(element) {
document.getElementById('img_' + element).style.visibility = "visible";
}
I want to show updated rows no every time. I have this code .want to remove and generate again as this same
var table = $('#table').children();
for (var j = i; j < result.length; j++) {
table.append("<tr><td>" + (j + 1) + "</td><td><b>" + result[j].VoterName + "</b></td><td><b>" + result[j].VoterContact + "</b></td><td><button>X</button></td></tr>");
i++;
}
function createOrDeleteTable(){
console.log("wadawdawd");
if($("#btn").attr("created") === "false") {
$("#btn").attr("created","true");
var tabledata = "<table>"
+ "<tr>"
+"<th> hey </th>"
+"<th> hello </th>"
+ "</tr>"
+ "</table>";
console.log(tabledata);
$("#appendHere").html(tabledata);
} else {
$("#btn").attr("created","false");
$("#appendHere").html("");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="createOrDeleteTable();" created="false" id="btn"> create table </button>
<div id="appendHere"> </div>
Please help with below mentioned scenario->
I am having wanna display values from 1 to 30 in a table such a way that nos 1,2,3 should come in one tag and like wise 4,5,6 in other tr tag ans so on till 30 value. I wanna use table for displaying values in a element of a table. wherein each value like "1" should display in one , no "2" should display in different <TD> and so on.
I mean to say that value "1" should be displayed in single <TD> of <Table> tag ,value "2" should be displayed in another <td> tag and so on ,Also after three subsequent <TD>s one <Tr> should be used. Output should be as folllows ->
1 2 3
4 5 6
7 8 9
and so on!
Early response would be much appreciated. Thanks.
I have tried Code as given below,
<script type="text/javascript">
document.write(" <table width='673' align='center' cellpadding='2' cellspacing='1'>");
document.write(" <tr>");
document.write(" <td valign = 'top'>");
document.write(" </td>");
document.write(" </tr>");
var cnt = 0;
for (var idx = 1; idx <= 30; idx++)
{
cnt = cnt + 1;
document.write(" <tr>");
document.write(" <td valign = 'top'>");
document.write(" <table width='100px' align='center' cellpadding='2' cellspacing='1'>");
document.write(" <tr>");
document.write(" <td align='center'>");
document.write(" " + idx + "");
document.write(" </td>");
document.write(" </tr>");
document.write(" <tr>");
document.write(" <td class='label'>");
document.write(" <span> name part : " + idx + "</span>");
document.write(" </td>");
document.write(" </tr>");
document.write(" </table>");
document.write(" </td>");
if (cnt = 3)
{
document.write(" </tr>");
}
if (cnt = 3) {
cnt = 0;
}
}
document.write(" </table>");
</script>
You can try something like this:
var mytable = "<table cellpadding=\"0\" cellspacing=\"0\"><tbody><tr>";
for (var i = 1; i < 31; i++) {
if (i % 3 == 1 && i != 1) {
mytable += "</tr><tr>";
}
mytable += "<td>[" + i + "]</td>";
}
mytable += "</tr></tbody></table>";
document.write(mytable);
Here is a jsFiddle demo
This is untested psuedo-code, but may help you get started:
var x, row;
for(x=1;x<10;x=x+row)
{
document.write('<tr>');
for(row=0;row<2;row++)
{
document.write('<td>' + (x + row));
// Whatever else you want to output
}
}
Edit: this answer was given before OP edited his question to add additional info.
Use the modulo operator % to check for 3rd numbers and set the tags accordingly.
http://en.wikibooks.org/wiki/C_Sharp_Programming/Operators