Javascript doesn't work - javascript

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);
}
}

Related

Grabbing value of input to string

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 += "";
}

Loop every nth item and fill the blanks

I want to build an HTML table string for every 10 items in a Javascript array, and if there are less than 10 items in the last iteration I want to fill it with empty rows.
How do I achieve this?
var array_of_items; //array of items
//make a html table string every 10 items
var table = '<table>';
table += '<tr><td>' + item1 + '</td></tr>';
table += '<tr><td>' + item2 + '</td></tr>';
.
.
.
table += '<tr><td>' + item10 + '</td></tr>';
table += '</table>';
//make second table
table = '<table>';
table += '<tr><td>' + item11 + '</td></tr>';
table += '<tr><td>' + item12 + '</td></tr>'; //array ends here
table += '<tr><td></td></tr>';
.
.
.
table += '<tr><td></td></tr>';
table += '</table>';
$('#table_div').html(table);
var table = '';
var numTables = Math.ceil(array_of_items.length / 10); //determine how many tables
for (var i=0;i<numTables;i++){
table +='<table>';
for (var j=0;j<10;j++){
(array_of_items[i*10+j] ? table +='<tr><td>' + array_of_items[i*10+j] + '</td></tr>' : table +='<tr><td></td></tr>');
}
table +='</table>';
}
var ln = items.length;
var lnten = ln + 10 - ln%10;
var container = $('#table_div');
for (var j = 0; j < lnten; j++) {
var tbl;
if (j % 10 == 0)
tbl = $('<table/>');
var tr = $('<tr/>');
var td = $('<td/>');
if (j < ln)
td.text(items[j]);
tr.append(td);
tbl.append(tr);
if (j % 10 == 0)
container.append(tbl);
}
jsfiddle DEMO
I think you're looking for this
for (var i = 0; i < array_of_items.length; i+=10) {
var table = '<table>';
for (var j = i; j < i+10; ++j) {
if (array_of_items[j] === 'undefined') {
table += '<tr><td></td></tr>';
}
else table += '<tr><td>' + array_of_items[j] + '</td></tr>';
}
table += '</table>';
}

Change text of a button in jquery

i have a board that contains 9 small boards and each small board contains 9 cells (Ultimate TicTacToe).
i'm trying to use the click function and print "x" on the clicked button but it doesnt change the text of the button and i dont have an idea why.
please help me.
here is the code:
<script>
var bigTable = "<table align='center' value='bigBoard' border='0' cellpadding='1' cellspacing='1'\><tbody>";
for (var k = 0; k < 9; k++)
{
if (k % 3 === 0)
{
bigTable += "<tr>";
}
bigTable += "<td>";
var mytable = "<table value='smallBoard'+k border='1' cellpadding='1' cellspacing='1'><tbody><tr>";
for (var j = 0; j < 3; j++)
{
for (var i = 0; i < 3; i++)
{
var position = +k + "," + j + "," + i;
mytable += "<td><button class='a' id=" + position + " type='submit' name=" + position + "></button</td>";
}
mytable += "</tr><tr>";
}
mytable += "</tr></tbody></table>";
bigTable += mytable + "</td>";
if (k % 3 === 2)
{
bigTable += "</tr>";
}
}
bigTable += "</tbody></table>";
document.write(bigTable);
</script>
<script>
$(document).ready(function() {
$(".a").click(function() {
var buttonPressed = $(this).attr("id");
jQuery.ajax({
data:buttonPressed,
url:"board",
success: function(responseText){
//alert("acac" + buttonPressed);
$("#" + buttonPressed).text(responseText);
}
});
});
});
</script>
This is what you are doing wrong, change this:
var position = +k + "," + j + "," + i;
to something like,
var position = +k + "-" + j + "-" + i;
Change the type of button from submit to button because you are calling Ajax request, not submitting the form.
I ran this jsfiddle and it works fine
Try it
http://jsfiddle.net/P8wrb/1/
Just declare a variable for your clicked button and then set the .text for it by reference
$(".a").click(function() {
var that = $(this);
....
that.text('X');
}

Referencing an array item in a function (as string) javascript

I created an array of strings, with the format "monthX" where is a number that increases throughout the array.
I have a function where I'm trying to reference a specific item of the array, but it keeps coming in as undefined. Here's my code:
function listCategories() {
categoryList.innerHTML = ""
for (var propertyName in categoryObject) {
var rowHTML = "<div>"
rowHTML += "<span class = 'category'>" + categoryObject[propertyName].name + "</span>"
rowHTML += "<span class = '" + monthList[3] + "'><input/></span>"
rowHTML += "</div>"
categoryList.innerHTML += rowHTML
}
}
//Months to load in
for (var i=0; i<24; i++) {
monthList[i] = "month" + (i + startingMonth)
}
The area I'm interested in is that "monthList[3]" line. That keeps coming in as undefined, even though I console.log(monthList[3]) it correctly says "month6". Any ideas? Do I have bug in my code?
Well, two questions:
WHEN do you call "listCategories()" ?
before or after you set monthList?
And, have you set the global for monthList first?
//globalize monthList array to be usable in functions
var monthList;
function listCategories() {
categoryList.innerHTML = ""
for (var propertyName in categoryObject) {
var rowHTML = "<div>"
rowHTML += "<span class = 'category'>" + categoryObject[propertyName].name + "</span>"
rowHTML += "<span class = '" + monthList[3] + "'><input/></span>"
rowHTML += "</div>"
categoryList.innerHTML += rowHTML
}
}
//Months to load in
for (var i=0; i<24; i++) {
monthList[i] = "month" + (i + startingMonth)
}
//do NOT CALL listCategories prior this line!!
That should do
In the code you show us, you never declare monthList or define it as an array.
function listCategories() {
categoryList.innerHTML = ""
for (var propertyName in categoryObject) {
var rowHTML = "<div>"
rowHTML += "<span class = 'category'>" + categoryObject[propertyName].name + "</span>"
rowHTML += "<span class = '" + monthList[3] + "'><input/></span>"
rowHTML += "</div>"
categoryList.innerHTML += rowHTML
}
}
var monthList = [],
startingMonth = 1;
//Months to load in
for (var i=0; i<24; i++) {
monthList[i] = "month" + (i + startingMonth)
}
Notice the additional lines I added after the function definition, but before the loop.

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