Grabbing value of input to string - javascript

I am completing a project which contains the following code. All that needs to be fixed is the start of each line. For example, if I used the input "8" it wouldn't reveal the full line of working, instead each line starts with a multiplication sign. Same goes for the other side which has bullet points. I wish to keep the bullet points but also have my input value on each line. I have tried using an id for my value, but it was unsuccessful.
Any advice or assistance would be greatly appreciated,
Cheers.
<html>
<head>
</head>
<body>
<h2 style="color:blue;">Enter an integer from 1 to 9:</h2>
<input type="text" id="multipleOf" value="">
<button onclick="multiplier()">Generate Times Table</button>
<div style="color:blue;" id="multTable"> <h2>Multiplication Table</h2> </div>
<script type="text/javascript">
//<![CDATA[
function multiplier() {
var mult = document.getElementById('multipleOf').value;
var str = '<table border="0" width="100%"><tr><td>';
str += '';
str += '';
for (var i=1; i<10; i++) {
str += '<br />';
str += '' + ' x ' + i + ' = ';
str += mult * i;
str += '';
str += '';
}
str += '</td><td>';
for (var i=1; i<10; i++) {
str += '<br />';
str += '•' + ' x ' + i + ' = ';
str += mult * i;
str += '';
str += '';
}
str += ''
str += '</td></tr></table>';
document.getElementById('multTable').innerHTML = '<h2>Multiplication
Table</h2>'+str;
}
//]]>
</script>
</body>
</html>

mult already contains the first operand, so it just needs to be added to str in the loops:
for (var i = 1; i < 10; i++) {
str += "<br />";
str += mult + " x " + i + " = "; // Concatenating mult here.
str += mult * i;
str += "";
str += "";
}
for (var i = 1; i < 10; i++) {
str += "<br />";
str += mult + "•" + " x " + i + " = "; // Concatenating mult here.
str += mult * i;
str += "";
str += "";
}

Related

How to add Javascript variable into div to allow formatting from CSS

My goal is to add three Javascript variables into div's to allow formatting from CSS. How do I get these items in div's?
function myWindow()
{
visitorEmail = document.getElementById("myEmail").value;
var findSymbol = /[#]/g;
var result = visitorEmail.match(findSymbol);
if (result != "#") {
document.getElementById("myEmail").focus();
}
else {
visitorName = document.getElementById("myName").value;
visitorAddress = document.getElementById("myAddress").value;
visitorPhone = document.getElementById("myPhone").value;
visitorPersonal = document.getElementById("myPersonal").value;
visitorCareer = document.getElementById("myCareer").value;
visitorEdu = document.getElementById("myEdu").value;
visitorEmp1 = document.getElementById("myEmp1").value;
visitorEmpDets1 = document.getElementById("myEmpDets1").value;
visitorEmp2 = document.getElementById("myEmp2").value;
visitorEmpDets2 = document.getElementById("myEmpDets2").value;
visitorEmp3 = document.getElementById("myEmp3").value;
visitorEmpDets3 = document.getElementById("myEmpDets3").value;
visitorEmp4 = document.getElementById("myEmp4").value;
visitorEmpDets4 = document.getElementById("myEmpDets4").value;
visitorRef = document.getElementById("myRef").value;
myTop = ("<html>\n<head>\n<title>Resume</title>\n</head>\n<body>\n");
myTop += (visitorName + "<br>");
myTop += (visitorAddress + "<br>");
myTop += (visitorPhone + "<br>");
myTop += (visitorEmail + "<hr>" + "<br>");
myText = ("<html>\n<head>\n<title>Resume</title>\n</head>\n<body>\n");
myText += (visitorPersonal + "<br>"+ "<br>");
myText += (visitorCareer + "<br>"+ "<br>");
myText += (visitorEdu += "<br>"+ "<br>");
myText += (visitorEmp1 += "<br>");
myText += (visitorEmpDets1 += "<br>"+ "<br>");
myText += (visitorEmp2 += "<br>");
myText += (visitorEmpDets2 += "<br>"+ "<br>");
myText += (visitorEmp3 += "<br>");
myText += (visitorEmpDets3 += "<br>"+ "<br>");
myText += (visitorEmp4 += "<br>");
myText += (visitorEmpDets4 += "<br>"+ "<br>");
myText += (visitorRef += "<br>");
myText += ("</body>\n</html>");
myHeadings = ("<html>\n<body>\n");
myHeadings += ("PERSONAL INFORMATION"+ "<br>");
myHeadings += ("CAREER OBJECTIVES"+ "<br>");
myHeadings += ("EDUCATIONAL BACKGROUND"+ "<br>");
myHeadings += ("EXPERIENCE"+ "<br>");
myHeadings += ("BUSINESS REFERENCES"+ "<br>");
flyWindow = window.open('about:blank','myPop','width=600,height=500,left=200,top=200');
flyWindow.document.write('<html><head><link rel="stylesheet" type="text/css" href="jsStyles.css" /></head><body><div>' + myTop + myText + '</div></body></html>');
}
}
Thank you!
This looks like a lot of typing. I would wrap all those repeating <br>-s with <li>. Porbably i would need to write function that takes some string argument and inserts into <li>. I would create array of strings from your form and iterate through them with given function like this:
const array = [visitorName, visitorAddress, visitorPhone...];
function createLi(string){
return `<li>${string}</li><br>`;
}
array.map(item => createLi(item));

Javascript for loop variable not working

I am having a problem with my for loop inside a javascript function. The variable i is not working as an argument for the function showAlbum(i). Why is that happening?
var out = "<table>";
for(i = 0; i < arr.length; i++) {
out += "<tr><td><a href=''onclick='showAlbum(i);' >"+
arr[i].artist +
" - " +
arr[i].title +
"</a></td></tr>";
}
out += "</table>";
Because i wrapped in quotations is the literal character i, not the value held within your i variable. You need to evaluate it outside of the quotations:
out += "<tr><td><a href=''onclick='showAlbum(" + i + ");' >"
The i is within the string literal, so variables are not parsed from the string.
Break out of the string like so:
out += "<tr><td><a href=''onclick='showAlbum(" + i + ");' >"+
// ^^^^^^^^^
Try changing the formatting to:
var i,
out = '<table>';
for (i = 0; i < arr.length; i++) {
out += '<tr><td><a href="" onclick="showAlbum(' + i + ')" >' +
arr[i].artist +
' - ' +
arr[i].title +
'</a></td></tr>';
}
out += '</table>';

Why is nan being added to data?

I make an ajax call to a servlet which sends JSON data. I parse it with JSON.parse() and put it into a string to display in table tag in html. But with every row cell data it is showing NaN. I have checked the data there is no NaN.
Here's the code.
var dataFromJSON = JSON.parse(result);
var count = dataFromJSON.count;
var str = "<table id='customers'><tr><th>LOGGED DATE</th></tr>";
for (var i = 0; i < count; i++) {
str += "<tr><td>" + dataFromJSON.records[i].common.logged_date +
+"</td>";
str += "</tr>";
}
str += "</table>";
$("#data").html(str);
The data in dataFromJSON.records[i].common.logged_date is 2016-02-23 10:11:43, but the table shows 2016-02-23 10:11:43NaN.
Please help.
Here:
str += "<tr><td>" + dataFromJSON.records[i].common.logged_date+
+ "</td>";
You have two + right after another. The browser tries to interpret this whitespace as a number
Remove one of the +.
You have put ++ please use only +
var dataFromJSON = JSON.parse(result);
var count = dataFromJSON.count;
var str = "<table id='customers'><tr><th>LOGGED DATE</th></tr>";
for (var i = 0; i < count; i++) {
str += "<tr><td>" + dataFromJSON.records[i].common.logged_date +"</td>"; //chnage here
str += "</tr>";
}
str += "</table>";
$("#data").html(str);

Javascript doesn't work

I want to get all inputs from my website and show them in alert message.
However, it seems this script isn't working correctly and only shows the first input element.
What should I do?
function dotest() {
var inputs = document.getElementsByTagName("input");
if (inputs.length > 0) {
var s = document.URL + "\n";
s += "-- Inputs list start --\n";
for (var i = 0; i < inputs.length; i++) {
var inputdata = inputs[i];
var imputdatas = null;
imputdatas += inputdata.name + ",";
imputdatas += inputdata.id + ",";
imputdatas += inputdata.type + ",";
imputdatas += inputdata.value + "\n";
}
s += imputdatas;
s += "-- End -\n\n";
}
if (s) {
alert(s);
}
}
dotest();
Add them all to s inside the loop, not after the loop
function dotest() {
var inputs = document.getElementsByTagName("input");
if (inputs.length > 0) {
var s = document.URL + "\n";
s += "-- Inputs list start --\n";
for (var i = 0; i < inputs.length; i++) {
var inputdata = inputs[i];
var imputdatas = '';
imputdatas += inputdata.name + ",";
imputdatas += inputdata.id + ",";
imputdatas += inputdata.type + ",";
imputdatas += inputdata.value + "\n";
s += imputdatas;
// ^^^ needs to be here
}
s += "-- End -\n\n";
}
if (s) {
alert(s);
}
}

dynamic drop down list values javascript

I want to populate my drop down list with dynamic values but the list remains empty in other words no option is shown Could someone help me !!!
here is my code http://jsfiddle.net/n6ahz/24/
var newdiv = document.createElement('div');
var text="TEXT";
var n=0;
newdiv.innerHTML += "<br> Question " + (n) + " : " + text + " ? <br><br>";
var m = 0;
var options = '';
for (var j = 1; j < 5; j++) {
var val = "marwa" + j;
if (val) {
m++;
options += " <option value="+j+"> " + val + "</option>";
}
}
newdiv.innerHTML += "<select name='single' id='single'>";
newdiv.innerHTML += " "+options + " </select> ";
document.getElementById('results').appendChild(newdiv);​
Instead of
newdiv.innerHTML += "<select name='single' id='single'>";
newdiv.innerHTML += " "+options + " </select> ";
try
newdiv.innerHTML += "<select name='single' id='single'> "+options + " </select> ";
I don't think adding HTML a bit at a time works because the browser will try to render it immediately.
With innerHTML, the actual DOM gets updated everytime you make a change. So you can't reliably make piecemeal changes like you're doing. Create a variable like var html and save all your HTML updates into it, then set element.innerHTML = html.
var newdiv = document.createElement('div');
var html = "";
var text="TEXT";
var n=0;
html += "<br> Question " + (n) + " : " + text + " ? <br><br>";
var m = 0;
var options = '';
for (var j = 1; j < 5; j++) {
var val = "marwa" + j;
if (val) {
m++;
options += " <option value="+j+"> " + val + "</option>";
}
}
html += "<select name='single' id='single'>";
html += " "+options + " </select> ";
newdiv.innerHTML = html;
document.getElementById('results').appendChild(newdiv);​
var newdiv = document.createElement('div');
var text="TEXT";
var n=1;
newdiv.innerHTML += "<br> Question " + (n) + " : " + text + " ? <br><br>";
var m = 1;
var options = '';
for (var j = 0; j <= 5; j++) {
var val = "marwa" + j;
if (val) {
m++;
options += " <option value="+j+"> " + val + "</option>";
}
}
newdiv.innerHTML += "<select name='single' id='single' "+options + " </select> ";
document.getElementById('results').appendChild(newdiv);​

Categories