I am being asked to create a table using javascript that displays simple arithmetic of a variable given to me by the user and I'm sure that my syntax is off inside of my document.write, but I'm not sure where and how. My error console says I'm missing a closing ')' at line 18 the end which is not true at all. I saw that in other cases it is frowned upon to use the document.write function for this purpose, but it's explicitly stated that I should do so as part of the requirements for the completion of this lab, so my sincere apologies for this transgression beforehand.
The code is below - Thanks in advance for any and all help:
<script>
var e1="", e2="", e3="", e4="", e5="", e6="", e7="", e8="", e9="";
e1 = prompt("Enter your first name in lower case", "");
var e1u = substr(0, 1);
e1 = e1u.toUpperCase() + e1.substr(1, e1.length-1);
e2 = prompt(e1 + ", enter an integer from 1 to 9", "");
e3 = prompt("Now enter 5 numbers delineated by a comma!", "");
e4 = prompt("Now enter 3 colors delineated by a comma!");
e5 = new date();
e6 = e3.split(',');
e7 = e4.split(',');
document.write(""Today's Date = " + e5.getMonth()+1 + "/" + e5.getDay() +
"/" + e5.getFullYear() + "\n" + "The number in e2 is " + e2 + "\n"
+ "<table><caption>Times Table for the number + e2 + "</caption>"");
for(var i=0; i<13; i++)
{
document.write(""<tr>""<td>" + e2 + "</td>" + "<td>" + i + "</td>" + "<td>" + "=" + "</td>" + "<td>" + (e2 * 1) * i + "</td>""</tr>"");
}
</script>
I fixed the following for you:
document.write("Today's Date = " + e5.getMonth()+1 + "/" + e5.getDay() +
"/" + e5.getFullYear() + "\n" + "The number in e2 is " + e2 + "\n"
+ "<table><caption>Times Table for the number" + e2 + "</caption>");
and
document.write("<tr><td>" + e2 + "</td>" + "<td>" + i + "</td>" + "<td>" + "=" + "</td>" + "<td>" + (e2 * 1) * i + "</td></tr>");
Don't double up quotations, and use an editor with syntax high-lighting. It will save you a lot of time.
This looks wrong:
+ "</td>""</tr>""
maybe you want
+ "</td></tr>"
Date(), not date()
e1.substr, not just substr and I would use substring, not substr
Missing quote after number e2
I would do it like this
http://jsfiddle.net/mplungjan/eggWj/
Tables must have the following nesting structure:
<table>
<tr>
<td> ... </td>
</tr>
</table>
Your <caption> cannot be placed where it is and likely belongs in a TD or outside of the table completely.
Related
I'm trying to have multiple tags inside a div using innerHTML.
Here's an example to better explain my issue.
var y = "jack.jpg";
var x = "Jack";
var f = "Hello world!";
document.getElementById("maindDiv").innerHTML += "<div class = 'result'>" + ": " + "<img src="y"/>" + ": " + x + ": " + f + "</div>" ;
As you can see I have too many apostrophes and I don't know how to use them so to have a variable in the src instead of a string. Thank you.
Check the quotes
document.getElementById("maindDiv").innerHTML += "<div class = 'result'>" + ": " + "<img src='"+y+"'/>" + ": " + x + ": " + f + "</div>" ;
var y = "jack.jpg";
var x = "Jack";
var f = "Hello world!";
document.getElementById("maindDiv").innerHTML += "<div class = 'result'>" + ": " + "<img src='"+y+"'/>" + ": " + x + ": " + f + "</div>" ;
<div id="maindDiv"></div>
You can also use Template strings:
var y = 'jack.jpg';
var x = 'Jack';
var f = 'Hello world!';
document.getElementById("maindDiv").innerHTML += `<div class='result'> + : + <img src=${y}/> + : + ${x} + : ${f} + </div>`;
But notice:
1) Those variables are strings (y, x, f) and you forgot the quotation marks;
2) You can't use the quotation marks when you are using the variable, you must use in the creation time.
Create dynamic variables to change image by just changing y:
You may optionally put them in for loop and iterate over an array to change the value of y:
var y = "jack.jpg";
var tagMaker = "<img src=\'./" + y + "\'>";
now use this:
document.getElementById("maindDiv").innerHTML += tagMaker
Assumptions: your image resides beside html file.
I Know why I'm getting undefined but i have no idea how to solve.
Tried to put null, but it is taking in as a text
var text ='{"employees":[' +
'{"name":"Tony","mobile":"99221111","email":"tony#json.com"},' +
'{"name":"Linda","mobile":"98981111","email":"linda#json.com"},' +
'{"name":"Patrick","mobile":"90902222","email":"patrick#json.com"},' +
'{"name":"Isabella","mobile":"99552222"}]}';
obj = JSON.parse(text);
for(var i in obj.employees)
{
document.getElementById("table").innerHTML += "<tr><td>" + obj.employees[i].name + "</td>" + "<td>" + obj.employees[i].mobile + "</td>"
+ "<td>" + obj.employees[i].email + "</td></tr>";
}
Hi, for Isabella there is no email, hence I'm getting undefined when I loop through to print out their details on html, however what I'm expecting is for the email portion to be empty in the table for Isabella. Is there a way to solve it?
You can use logical OR (|| in JavaScript), which will use the second value (empty string in this case) if the first value (email) is undefined:
var text = '{"employees":[' +
'{"name":"Tony","mobile":"99221111","email":"tony#json.com"},' +
'{"name":"Linda","mobile":"98981111","email":"linda#json.com"},' +
'{"name":"Patrick","mobile":"90902222","email":"patrick#json.com"},' +
'{"name":"Isabella","mobile":"99552222"}]}';
obj = JSON.parse(text);
for (var i in obj.employees) {
document.getElementById("table").innerHTML += "<tr><td>" + obj.employees[i].name + "</td>" + "<td>" + obj.employees[i].mobile + "</td>" +
"<td>" + (obj.employees[i].email || '') + "</td></tr>";
}
<table id="table"></table>
In my form I have a total field which is the sum of several checkboxes. When it reaches 21 total page one must be created. below the code, which worked well in another case and this time it gives me a syntax error. someone there you an idea ??
Thank you in advance
this.getField("TOTAL").value =
this.getField("P6eval_competences.manageriales.0").value +
this.getField("P6eval_competences.manageriales.1").value +
this.getField("P6eval_competences.manageriales.2").value +
this.getField("P6eval_competences.manageriales.3").value +
this.getField("P6eval_competences.manageriales.4").value +
this.getField("P6eval_competences.manageriales.5").value +
this.getField("P6eval_competences.manageriales.6").value +
this.getField("P6eval_competences.manageriales.7").value +
this.getField("P6eval_competences.manageriales.8").value +
this.getField("P6eval_competences.manageriales.9").value +
this.getField("P6eval_competences.manageriales.10").value +
this.getField("P6eval_competences.manageriales.11").value +
this.getField("P6eval_competences.manageriales.12").value +
this.getField("P6eval_competences.manageriales.13").value +
this.getField("P6eval_competences.manageriales.14").value +
this.getField("P6eval_competences.manageriales.15").value +
this.getField("P6eval_competences.manageriales.16").value +
this.getField("P6eval_competences.manageriales.17").value +
this.getField("P6eval_competences.manageriales.18").value +
this.getField("P6eval_competences.manageriales.19").value +
this.getField("P6eval_competences.manageriales.20").value +
this.getField("P6eval_competences.manageriales.21").value +
this.getField("P6eval_competences.manageriales.22").value +
this.getField("P6eval_competences.manageriales.23").value +
this.getField("P6eval_competences.manageriales.24").value +
this.getField("P6eval_competences.manageriales.25").value +
this.getField("P6eval_competences.manageriales.26").value +
this.getField("P6eval_competences.manageriales.27").value +
this.getField("P6eval_competences.manageriales.28").value +
this.getField("P6eval_competences.manageriales.29").value +
this.getField("P6eval_competences.manageriales.30").value +
this.getField("P6eval_competences.manageriales.31").value;
if (getField("TOTAL").value == "21") {
var expTplt = getTemplate("NIVEAU MATURE");
expTplt.spawn(numPages, true, false);
}
I think you should use parseInt() method cause the values which are returned are not Integer rather they are Strings.
$("#searchresult").append("<tr><td id=''>" + data[i].landarp + "</td>" + "<td id=''>" + data[i].landarp + "</td>" + "<td id=''>" + data[i].landpin + "</td>" + "<td id=''>" + (data[i].landlot ? "Lot " + data[i].landlot : "") + "/" + (data[i].landblock ? "Block " + data[i].landblock : "") + "</td>" + "<td id=''>" + data[i].landfirstname + " " + data[i].landmiddlename + " " + data[i].landlastname + ", " + data[i].landsuffix + "</td>"
for (var land = 0; land < landaddress.length; land++) {
landownercontactflag = landaddress[land].landownercontactflag;
landownercontactflag === "1" ? (contactaddress = landaddress[land].landownerprovince + " " + landaddress[land].landownermunicipality + " " + landaddress[land].landownerbarangay + ", " + landaddress[land].landownerstreet) : (homeaddress = landaddress[land].landownerprovince + " " + landaddress[land].landownermunicipality + " " + landaddress[land].landownerbarangay + ", " + landaddress[land].landownerstreet) + "<td id=''>" + landownercontactflag === "1" ? contactaddress : homeaddress + "</td>"
} + "<td id=''>" + data[i].landyear + "</td>" + "<td id=''>" + "<a class=\"af_rpta_treasuryall_specificpin\" id=" + data[i].landpin + " href='#' >View Details</a>" + "</td></tr>");
Trying to append data from database using this code but then i get Uncaught SyntaxError: missing ) after argument list in this line +"<td id=''>" + data[i].landfirstname + " " + data[i].landmiddlename + " " + data[i].landlastname + ", " + data[i].landsuffix + "</td>" what is the cause of this and how to fix it
If you remove all the data specific parts, this is what you have:
$("#searchresult").append("text"
for (var land = 0; land < landaddress.length; land++) {
landownercontactflag = "text";
}
+ "text");
I am not missing a ")" i checked it thoroughly i think its because of for loop inside append just like comment above
There's a missing ")" at the end of the append("text"
(you'll also notice I've changed the indentation to how it's interpreted)
Javascript does not require the use of ";" to end statements and you can use a newline to mean the same, ie these are equivalent:
$("#").append()
and
$("#").append();
because there's a newline at the end of the append(, it looks to see what the next statement is. If this was a '+' it would continue to append the next text, but in this case, it's a new statement for - so javascript attempts to close off the .append( and gives an error that there's a missing ")".
This is the equivalent of:
$("#searchresult").append("text";
for ...
see the ";" at the end now? As there's no ")" before the implied ";", it gives you the warning that there's a ")" missing.
If you did add the ');' at the end of the line then you'll get an error later on about the + .. as there's nothing for the + to be +ed to.
As you've established, this is because of trying to put a command inside the brackets of another - but I wanted to explain why the interpreter thinks this way with the implied end-of-statement at a newline.
You can't put a for statement inside a $("#searchresult").append(
My suggestion is to create a variable and to populate it... then to use it inside append.
For example:
var myVar = "<tr><td id=''>" + data[i].landarp + "</td>" + "<td id=''>" + data[i].landarp
...
for (var land = 0; land < landaddress.length; land++) {
landownercontactflag = landaddress[land].landownercontactflag;
....
myVar = myVar + ......
.....
}
....
$("#searchresult").append(myVar);
But... are you sure you really know what your "for" loop is doing?
UPDATE: as alternative (without a variable):
$("#searchresult").append("<tr><td id=''>" + data[i].landarp + "</td>" + "<td id=''>" + data[i].landarp ....);
...
for (var land = 0; land < landaddress.length; land++) {
landownercontactflag = landaddress[land].landownercontactflag;
....
$("#searchresult").append(".....");
}
....
$("#searchresult").append("....");
first of all i need to say that i don't have much experience with JS. currently i'm trying to implement an web application with MVC framework. I'm in a work to develop an app that is also compatible with Internet explorer. in that case i'm using following JS method to populate a table which is working fine with all the browsers....
function populateTable(array) {
document.getElementById("instalationTable").style.display = "block";
var table = document.getElementById("ActivityDescription_installationID");
table.innerHTML = "";
elementsInTable = array;
var x = 0;
for (i = 0; i < (array.length * 2) ; i++) {
//alert(i);
if ((i % 2) == 0) {
//ID Row
var row = table.insertRow(i);
var cell_1 = row.insertCell(0);
cell_1.innerHTML = "<input type='text' disable='' class='form-control' value=" + array[x] + ">";
x = x + 1;
var cell_2 = row.insertCell(1);
cell_2.innerHTML = "<span class='btn btn-default' onclick='showEditRow(this)'><img src='../../Content/images/1414409386_48-24.png' /></span>";
var cell_3 = row.insertCell(2);
cell_3.innerHTML = "<span class='btn btn-default' onclick='removeRow(this)'>X</apan>";
}
else {
//Detail Row
var rowDetails = table.insertRow(i);
var cell = rowDetails.insertCell(0);
//cell.colspan = "3";
cell.innerHTML = "<table style='background-color:rgb(98, 98, 98);color:black;border- radius: 5px;' margin:2%; >" +
"<tr>" +
"<td><input type='checkbox' id='"+x+"_appServer'/> Application Server</span></td>" +
"<td>" +
"<select id='" + x + "_appServerVersion'>" +
"<option>Application version</option>" +
"</select>" +
"</td>" +
"</tr>" +
"<tr>" +
"<td colspan='2'><input type='radio' name='database' id='"+x+"_emptyDb' onChange='enableOptions(1)'/>" +
" Empty Database</br><input type='radio' name='database' id='" + x + "_instalationSlt' onChange='enableOptions(2)'/> Something Databse</td>" +
"</tr>" +
"<tr id='emptyDB'>" +
"<td>" +
"Oracle Version"+
"<select id='JS_OraVersion' name='" + x + "_oraVersion' style='width:100%'>" +
"<option>Ora version</option>" +
"</select>" +
"</td>" +
"<td>" +
"Character Set" +
"<select id='JS_ChaSet' name='" + x + "_ChaSet' style='width:100%'>" +
"<option>Cha Set</option>" +
"</select>" +
"</td>" +
"</tr>" +
"<tr id='dbImport'>" +
"<td>" +
"Something version" +
"<select id='JS_ImportVersion' name='" + x + "_ImportVersion' style='width:100%'>" +
"<option>Something version</option>" +
"</select>" +
"</td>" +
"<td>" +
"Something Charachter" +
"<select id='JS_ImportChaSet' name='" + x + "_ImportChaSet' style='width:100%'>" +
"<option>Something Cha</option>" +
"</select>" +
"</td>" +
"</tr>" +
"<tr>" +
"<td colspan='2'>" +
"Additional Requests </br>" +
"<textarea rows='4' id='" + x + "_specialReq' cols='37'> </textarea>" +
"<td/>"+
"</tr>"+
"</table>";
rowDetails.style.display = 'none';
Lock();
}
}
document.getElementById("instalationTable").style.display = "block";
}
i'm populating a form on the above table row, that collects some data to continue. to collect data i'm using following function which works fine with Google chrome but not with Internet explorer..
function getAllData() {
var StringtoSent = "";
for (i = 0; i < (elementsInTable.length) ; i++) {
var InsId = elementsInTable[i];
var _appServer = document.getElementById((i + 1) + "_appServer").checked;
var _appServerVersionDropDown = document.getElementById((i + 1) + "_appServerVersion");
var _appServerVersion = _appServerVersionDropDown.options[_appServerVersionDropDown.selectedIndex].value;
var _emptyDb = document.getElementById((i + 1) + "_emptyDb").checked;
var _instalationSlt = document.getElementById((i + 1) + "_instalationSlt").checked;
var _oraVersionDropDown = document.getElementsByName((i + 1) + "_oraVersion")[0];
var _oraVersion = _oraVersionDropDown.options[_oraVersionDropDown.selectedIndex].value;
var _ChaSetDropDown = document.getElementsByName((i + 1) + "_ChaSet")[0];
var _ChaSet = _ChaSetDropDown.options[_ChaSetDropDown.selectedIndex].value;
var _ImportVersionDropDown = document.getElementsByName((i + 1) + "_ImportVersion")[0];
var _ImportVersion = _ImportVersionDropDown.options[_ImportVersionDropDown.selectedIndex].value;
var _ImportChaSetDropDown = document.getElementsByName((i + 1) + "_ImportChaSet")[0];
var _ImportChaSet = _ImportChaSetDropDown.options[_ImportChaSetDropDown.selectedIndex].value;
var _specialReq = document.getElementById((i + 1) + "_specialReq").value;
StringtoSent = StringtoSent + "," + InsId + "," + _appServer + "," + _appServerVersion + "," + _emptyDb + "," + _instalationSlt + "," + _oraVersion + "," + _ChaSet + "," + _ImportVersion + "," + _ImportChaSet + "," + _specialReq + "|";
//return StringtoSent;
document.getElementById("ActivityDescription_instalationDetails").value = StringtoSent;
}
}
following image shows the error that im getting when it is ruining on VS 2012s IIS Express.
for (i = 0; i < (elementsInTable.length) ; i++) {
is the place that indicates as the error place . it always highlight the "elementsInTable.length" code segment.
Actually this error message elaborate nothing. i found some articles about the same error but occurring when trying to change the inner HTML of an element. but those solutions are not compatible for this situation.. Please help me with the problem
thanks in advance
Finally i found the Error
cell.innerHTML = "<table style='background-color:rgb(98, 98, 98);color:black;border- radius: 5px;' margin:2%; >" +
in above line i mistakenly added a CSS attribute "margin:2%;" in to a wrong place. Google chrome is intelligence enough to manage the situation and proceed the activity but Internet Explorer is not. as i found, this is the fact that prompt same error in different situations.
EG:
http://www.webdeveloper.com/forum/showthread.php?22946-innerHTML-amp-IE-Unknown-Runtime-Error
http://www.webdeveloper.com/forum/showthread.php?22946-innerHTML-amp-IE-Unknown-Runtime-Error
So if you got any unknown error in your Java Script code which uses "element.InnerHTML" or "document.Write" its better to check whether your tags are properly closed.
and i found several other situations that is generating same error
IE shows run time error for innerHTML
InnerHTML issue in IE8 and below
most of the times you can avoid this error by following W3C tag recommendations (http://www.w3.org/TR/html401/struct/global.html).