I have this problem I have been working on for a few days. I need to make a page that requests the user for 12 letters, and click the submit button. I cannot make what I have come up with work. Suggestions are welcomed! The Javascript that is run should do the following: Generate a random number 1-3, for the number of rows, and put the 12 characters into a formatted table. For example, a random generated table might produce the following:
Text entered: abcdefghijkl
a b c
d e f
g h i
j k l
Or:
a b c d
e f g h
i j k l
etc.
My HTML:
<form name="table">
<p>Enter 12 letters</p>
<input type="text" id= "userVal" size="12">
<input type="button" value="submit" onclick="createTable()">
Javascript:
var numrows= randomnumber=Math.floor(Math.random()*4)
var numcols=4
document.write ("<table border='1'>")
for (var i=1; i<=numrows; i++)
{
document.write ("<tr>");
for (var j=1; j<=numcols; j++)
{
document.write ("<td>" + i*j + "</td>");
}
document.write ("</tr>");
}
document.write ("</table>");
function createTable(){
See if this is the behavior you are looking for:
http://jsfiddle.net/sDbkw/
I modified the loops to be zero based and referenced the textbox:
var createTable = function () {
var numrows = Math.floor(Math.random()*3) + 1; // x3 gets 0, 1, or 2 so increment 1
var numcols = 12 / numrows; // if always printing 12 chars
var userText = $('#userVal').val();
var output = "<table border='1'>";
for (var i=0; i < numrows; i++)
{
output += "<tr>";
for (var j=0; j<numcols; j++)
{
output += '<td>' + userText[i*numcols + j] + '</td>';
}
output += "</tr>";
}
output += "</table>";
$('#output').html(output);
};
Related
Well hello hello everyone, new to javascript. I received an assignment and am at a bit of a standstill. I need to have a user-generated table that labels itself. I am having a hard enough time getting the table to generate properly with the input from prompts. Now I am also stuck with the loop needed for the labeled rows and columns as well. It May seem ridiculous how simple this is but I am exhausted and receiving little guidance and could use the help.
The table should look like this. I can't even get the table to generate properly with loops yet.
[1][2][3][4]
[5][6][7][8]
<!DOCTYPE html>
<script>
var row = prompt("how many rows would you like?");
var col = prompt("how many colums would you like?");
</script>
<body>
<script>
var mytable = "";
var cellNum = 0;
for (var r = 0; r < row ; r++);
{
mytable += "<tr>";
for (var c = 0 ; c < col; c++ );
{
mytable += "<td>" + cellNum++; + "</td>";
}
mytable += "</tr>";
}
document.write("<table border=1>" + mytable + "</table>");
</script>
</body>
You basically put a semicolon behind the first for loop.
for (var c = 0 ; c < col; c++ );
Right version would be this piece of code:
for (var c = 0 ; c < col; c++ )
I also would change
for (var r = 0; r < row ; r++)
into
for (var r = 0; r < row-1 ; r++)
or you gonna end up with a empty row.
Have a great day!
the answer has already been put above. Just a fun take from my side as well.
How about we create some huge amount of cells and show only part of them depending on input. I've used flex container to conditionally set styles.
The fiddle: https://jsfiddle.net/42c1mep8/30/
Cheers!
just remove semicolons from the for loop.
var mytable = "";
var cellNum=0, row=3, col=4;
for (var r = 0; r < row ; r++) {
mytable += "<tr>";
for (var c = 0 ; c < col; c++ ) {
mytable += "<td>" + (++cellNum) + "</td>";
}
mytable += "</tr>";
}
document.write("<table border=1>" + mytable + "</table>");
I'm trying display 2 different characters, but it doesn't work. It only shows one of the characters. (first letter - 8 times by 1 letter, second letter on a different line - 8 times by 3 letters).
For example:
i i i i
ttt ttt ttt ttt
Could someone help please?
<script>
function rainbow() {
var temp = "";
var i, j;
for (i = 0; i < 8; i++) {
for (j = 0; j < 6; j++) {
temp += " " + " " + " ";
}
temp += document.getElementById("dead_rainbow").value
}
var pop = "";
var k, l;
for (k = 0; k < 8; k++) {
for (l = 0; l < 3; l++) {
pop += " " + " ";
}
pop += document.getElementById("dead_unicorn").value
}
document.getElementById("demo").innerHTML = " " + temp;
document.getElementById("demo").innerHTML = " " + pop;
}
</script>
<input id="dead_unicorn" type="text" />  Character For Candles<br>
<input id="dead_rainbow" type="text" />  Character For Menorah<br><br>
<button type="button" onclick="rainbow()">Run</button>
<p id="demo"></p>
I didn't understand well your question but is this what you need ? if not let me know in order to adjust the script: so my understanding is:
input 1 = i
input 2 = j
result :
i i i i i i i i (8 times)
jjj jjj jjj jjj jjj jjj jjj jjj (8 times)
if this is correct so try this solution:
<script>
function rainbow() {
var temp = "";
var i, j;
for (i = 0; i < 8; i++) {
for (j = 0; j < 6; j++) {
temp += " " + " " + " ";
}
temp += document.getElementById("dead_rainbow").value;
}
var pop = "";
var k, l;
for (k = 0; k < 8; k++) {
for (l = 0; l < 8; l++) {
pop += " " + " ";
}
secondVal = document.getElementById("dead_unicorn").value
pop += secondVal + secondVal + secondVal;
}
document.getElementById("demo").innerHTML = " " + temp + "<br>";
document.getElementById("demo").innerHTML += " " + pop;
}
</script>
<input id="dead_unicorn" type="text" />  Character For Candles<br>
<input id="dead_rainbow" type="text" />  Character For Menorah<br><br>
<button type="button" onclick="rainbow()">Run</button>
<div id="demo"></div>
Good luck!
First and foremost: your debugger doesn't show an error because there is no - at least from a syntactical point of view. Your problem is inside the logic.
As blex already mentioned the most predominate is this:
document.getElementById("demo").innerHTML = " " + temp;
document.getElementById("demo").innerHTML = " " + pop;
I guess you might have thought this will simply add-up the strings and ultimately be assigned to the .innerHTML property of your <div>. Well that's not the case. With the = operator you're assigning a new value - so the second call will wipe out what was there previously. You can add the two strings (and possibly a new line tag) and assign it in one go:
document.getElementById("demo").innerHTML = " " + temp + pop;
Your for-loop seems a bit overloaded. To simplify I'd recommend creating a 'pattern' by code, which you simply repeat using a simpler for-loop.
So in pseudo-code:
My-result=[empty]
My-pattern= ttt[space]
for a=0 to 8
My-result = My-result + My-pattern
Now unfortunately I'm not sure what you want the result to look like. I think you want to have the single characters right above the space in between the groups of three letters. With a standard font this is not exactly possible because the width of individual characters is not the same. As a result it will look a little something like this:
As you can see the letters drift apart. Compensation is usually done by using a monospace font. That's a font where e.g. the space character and the i character (as well as all other characters) are of equal width.
You can fake it by putting equal characters in between your desired characters on both lines and make them invisible.
Here's an example:
function rainbow() {
var letterA = document.getElementById("dead_rainbow").value;
var letterB = document.getElementById("dead_unicorn").value;
var myResult = "";
var myPattern = "<span style='visibility:hidden;'>" + letterA + letterA + letterA + "</span>" + letterB;
for (j = 0; j < 8; j++) {
myResult += myPattern;
}
myResult += "<br>";
myPattern = letterA + letterA + letterA + "<span style='visibility:hidden;'>" + letterB + "</span>";
for (j = 0; j < 8; j++) {
myResult += myPattern;
}
document.getElementById("demo").innerHTML = myResult;
}
<input id="dead_unicorn" type="text" />  Character For Candles<br>
<input id="dead_rainbow" type="text" />  Character For Menorah<br><br>
<button type="button" onclick="rainbow()">Run</button>
<p id="demo"></p>
I am trying to print this pattern using javascript
10
10 20
10 20 30
10 20 30 40
10 20 30 40 50
So far I've tried a for loop
for (i=10; i<=50; i+=10){
document.write(i+' \b');
}
How should I enhance the code?
var i, p = [];
for (i=10; i<=50; i+=10){
p.push(i);
document.write(p.join(' ') + '<br>');
}
Edit for #macmee
var i, p = [];
for (i=1; i<=5; i++){
p.push(i*10);
document.write(p.join(' ') + '<br>');
}
This leaves no trailing spaces at the end of any lines.
var p = "";
for (var i = 10; i <= 50; i += 10){
p += ' ' + i;
document.write(p.trim() + '<br>');
}
Ignoring the issues with using document.write for a task like this:
var prevEntry = "";
for (i=10; i<=50; i+=10){
prevEntry += i+' \b';
document.write(prevEntry + '<br>');
}
This seems like a homework question because document.write should really never be used, but anyway:
// store answer here
var str = '';
// makes sure 1 number is printed on line 1, 2 on line 2, etc
for(var i = 0; i < 5; i++) {
// makes sure 1 number is printed on row 1, 2 on row 2, etc
for(var j = 0; j <= i; j++) {
str += (j+1)*10 + ' ';
}
str += '<br>';
}
// write it to the document (please consider using jquery instead)
document.write(str);
How can I reference specific cells in Google script to loop, and to return values to specific cells, like the example shown below in VBA.
How would this be written in Google script?
For j = 1 To 20 Step 2
For i = 1 To 20
g = Worksheets("Notes").Cells(i + 15, j + 2).Value
h = Worksheets("Notes").Cells(4, j + 2).Value
l = Worksheets("Notes").Cells(5, j + 2).Value
If Worksheets("Notes").Cells(i + 15, j + 2).Value <> "" Then
etc.
You may use simple for loops in javascript to loop through the cells
//get the sheet object
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Notes');
for(j=0; j<=20; j++){
for(i=0; i<=20; i++){
g = sheet.getRange(i + 15, j + 2).getValue();
//...
//...
//and so on
}
}
this is an example:
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Notes');
var lastrow=sheet.getLastRow();
var lastcolumn=sheet.getLastColumn();
//In Google Script you should specify the range you want I/O from
var range=sheet.getRange(1,1,lastcolumn,lastrow);
//Return 2D Array for all range Values
var all = range.getValues();
for(var j=0; j<=20; j++){
for(var i=0; i<=20; i++){
//Return each value
var all = range.getCell(i + 15, j + 2).getValue();
}
}
A Better way is not to call getCell each time as you have already got the data.
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Notes');
var lastrow=sheet.getLastRow();
var lastcolumn=sheet.getLastColumn();
//In Google Script you should specify the range you want I/O from
var range=sheet.getRange(1,1,lastcolumn,lastrow);
//Return 2D Array for all range Values
var values = range.getValues(); //2D array of row and column values
for(var r=0; r < values.length; r++){
for(var c=0; c < values[r].length; c++) {
//Return each value
var value = value[r][c]; //row, column
}
}
I've tried hard, but I just can't figure it out.
I want to output numbers, but only one character of the number at time. I need to create something like this:
This should be created within a for-loop:
http://jsfiddle.net/jv7H8/
But as you can see there is more than one character in a cell when number > 10.
The desired result should be for example:
1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 0, 1, 1, 1, 2, 1, 3, 1, 4....
Any suggestions? :)
First concatenate the numbers into a string:
var s = '';
for (var i = 1; i <= 42; i++) s += i.toString();
Then loop the characters in the string:
for (var i = 0; i < s.length; i++) {
// output s[i]
}
Here is your jsfiddle updated with my approach: http://jsfiddle.net/jv7H8/2/
The pertinent aspects that I changed was adding a for loop that processed through the length of the number you were going to output:
var str = number.toString(); // the current number as you're looping through
for (var k = 0; k < str.length; k++) {
var oneLetterAtATime = str.charAt(k); // get the digits one at a time
output += "<td>" + oneLetterAtATime + "</td>";
}
number++;
Edit: If you need there to only be nineteen columns, then you'll need to update your column counter for every instance where you are displaying another <td> but not looping back around to increment your column counter. I.e.,
if (k > 0) {
j++;
}
Here is an updated version displaying how this would work: http://jsfiddle.net/jv7H8/21/
Notably, there isn't a very good way to not go past the 19th column when you are in the middle of displaying a number in the 19th column that has more than one digit.
Take all the characters in a string like this:
var t = '';
var limit=100;
for (var j = 1; j<= limit; j++) t += j.toString();
var output='';
for (var j = 0; j < t.length; j++) {
output=output+','+t[i];
}
alert(output);
Please check your updated fiddle here
This will server your purpose.
Following is the code, most of it is your code only:
rows = 3;
columns = 19;
number = 1;
var str = "";
output = '<table style="width:100%;">';
for(var i = 0; i < rows; i++) {
output += "<tr>";
for(var j = 0; j < columns; j++) {
output += "<td>" + number + "</td>";
str +=number;
number++;
}
output += "</tr>";
}
output += "</table>";
$("#game").html(output);
var strvalue="";
$.each(str, function(e,v){
if (e > 0){
strvalue = strvalue + ", "+ v;
}
else{
strvalue += v;
}
});
alert(strvalue);