We Keep Coding

Javascript producing random arrays with random numbers in it?

I am doing a simple assignment for class, and am trying to create a table using just Javascript. I have my table perfectly set up, it's just that every other row it shows a random number, and then skips to the next. how can I get rid of the random row?
var table = ["Name", "Turn Average", "Surface Area", "100% Boosting"];
var names = ["Octane", "Dominus", "Breakout", "X-Devil", "Batmobile"];
var turnaverages = [2.18, 2.22, 2.22, 2.21, 2.25];
var surfacearea = [34495, 34529, 32679, 34242, 34365];
var maxboost = [1.967, 2.031, 2.035, 2.014, 2.10];
function info() {
document.write("<table>");
document.write("<tr>");
//these next lines output the table heading (th) tags for the table (this information doesn't repeat in the table)
document.write("<th>Name</th>");
document.write("<th>Turn Average</th>");
document.write("<th>Surface Area</th>");
document.write("<th>100% Boosting</th>");
document.write("</tr>"); //close first table row element
//create a for loop that will last for the number of days in the forecast
for(var i = 0; i < names.length; i++){
document.write("<tr>"); //create a table row
//output each table data tag for the table with information pulled
from the arrays
document.write("<td>" + names[i] + "</td>");
document.write("<td>" + turnaverages[i] + "</td>");
document.write("<td>" + surfacearea[i] + "</td>");
document.write("<td>" + maxboost[i] + "</td>");
document.write("</tr>");
//depending on the description of the weather for the day, change
the image to be representative to that description -- (for
example on a rainy day, show the rainy image)
if ( names[i] === "Dominus" ) {
document.write("<td>" + turnaverages[i] + surfacearea[i] +
maxboost[i] + "</td>");
}
else if ( names[i] === "Breakout" ){
document.write("<td>" + turnaverages[i] + surfacearea[i] +
maxboost[i] + "</td>");
}
else if ( names[i] === "X-Devil" ){
document.write("<td>" + turnaverages[i] + surfacearea[i] +
maxboost[i] + "</td>");
}
else if( names[i] === "Batmobile" ){
document.write("<td>" + turnaverages[i] + surfacearea[i] +
maxboost[i] + "</td>");
}
document.write("</tr>"); //close the table row element
}
document.write("</table>"); //close the table element
}

You have
document.write("<td>" + maxboost[i] + "</td>");
document.write("</tr>");
followed immediately by weather tests that attempt to write tds, followed again by another
document.write("</tr>"); //close the table row element
So, you just need to delete the first </tr>, since you don't actually want to close the row yet:
var table = ["Name", "Turn Average", "Surface Area", "100% Boosting"];
var names = ["Octane", "Dominus", "Breakout", "X-Devil", "Batmobile"];
var turnaverages = [2.18, 2.22, 2.22, 2.21, 2.25];
var surfacearea = [34495, 34529, 32679, 34242, 34365];
var maxboost = [1.967, 2.031, 2.035, 2.014, 2.10];
function info() {
document.write("<table>");
document.write("<tr>");
//these next lines output the table heading (th) tags for the table (this
document.write("<th>Name</th>");
document.write("<th>Turn Average</th>");
document.write("<th>Surface Area</th>");
document.write("<th>100% Boosting</th>");
document.write("</tr>"); //close first table row element
//create a for loop that will last for the number of days in the forecast
for (var i = 0; i < names.length; i++) {
document.write("<tr>"); //create a table row
//output each table data tag for the table with information pulled
document.write("<td>" + names[i] + "</td>");
document.write("<td>" + turnaverages[i] + "</td>");
document.write("<td>" + surfacearea[i] + "</td>");
document.write("<td>" + maxboost[i] + "</td>");
//depending on the description of the weather for the day, change
if (names[i] === "Dominus") {
document.write("<td>" + turnaverages[i] + surfacearea[i] +
maxboost[i] + "</td>");
} else if (names[i] === "Breakout") {
document.write("<td>" + turnaverages[i] + surfacearea[i] +
maxboost[i] + "</td>");
} else if (names[i] === "X-Devil") {
document.write("<td>" + turnaverages[i] + surfacearea[i] +
maxboost[i] + "</td>");
} else if (names[i] === "Batmobile") {
document.write("<td>" + turnaverages[i] + surfacearea[i] +
maxboost[i] + "</td>");
}
document.write("</tr>"); //close the table row element
}
document.write("</table>"); //close the table element
}
info();
The 2.22345292.031 and similar numbers are a result of string cocatenation - when you take a string and + to it, you will end up with another string. (not sure what you actually want there instead)

Not able to display the div content in two container

I want to display the randomly displayed values from 'test1' and 'test2' arrays into two different containers "mainone" and "maintwo". Now I am able to get the random values from array but failed to display the whole html content in containers during on click of click me button each time;
My fiddle here:
https://jsfiddle.net/scrumvisualize/yecoqusp/
Page with data on load
var teama = ["one_1", "one_2", "one_3","one_4", "one_5"];
var test1 = [];
var test2 = [];
function startTeam(){
for(var i = teama.length - 1; i >= 0; i--){
var randomIndex =Math.floor(Math.random()*teama.length);
var rand = teama[randomIndex];
teama.splice(randomIndex, 1);
if(i%2){
test1.push(rand);
}else{
test2.push(rand);
}
}
alert(test1);
alert(test2);
for(var j=0; j<test1.length; j++){
$('#mainone').html('<div id="' + test1[j] + '" class="well">' + test1[j] + '</div>');
}
for(var k=0; k<test2.length; k++){
$('#maintwo').html('<div id="' + test2[k] + '" <div class="well"></div>' + test2[k] + '</div>');
}
}

I tried to work on your fiddle, but no avail, as a guesswork, you have this
for(var j=0; j<test1.length; j++){
$('#mainone').html('<div id="' + test1[j] + '" class="well">' + test1[j] + '</div>');
}
for(var k=0; k<test2.length; k++){
$('#maintwo').html('<div id="' + test2[k] + '" <div class="well"></div>' + test2[k] + '</div>');
}
each loop in the two for-loops is overriding the corresponding div's html,
instead create two variables, say main1html and main2html outside the for loops and the for-loops should be something like:
for(var j=0; j<test1.length; j++){
main1html += '<div id="' + test1[j] + '" class="well">' + test1[j] + '</div>');
}
for(var k=0; k<test2.length; k++){
main2html += '<div id="' + test2[k] + '" <div class="well"></div>' + test2[k] + '</div>';
}
and after the two for-loops assign the final html to both divs, like this:
$('#mainone').html(main1html);
$('#maintwo').html(main2html);

Ok, so, as was mentioned elsewhere, using .html() is just overriding the data each time. There are a couple issues in your code, however.
You are not properly closing your div(s) in the second loop.
You need to append the new data to the container (clear the container first if you need to, I do in my example.)
Fiddle
var teama = ["one_1", "one_2", "one_3","one_4", "one_5"];
var test1 = [];
var test2 = [];
function startTeam(){
for(var i = teama.length - 1; i >= 0; i--){
var randomIndex =Math.floor(Math.random()*teama.length);
var rand = teama[randomIndex];
teama.splice(randomIndex, 1);
if(i%2){
test1.push(rand);
}else{
test2.push(rand);
}
}
alert(test1);
alert(test2);
// i'm emptying the containers, you may not need to depending
// on your implementation
$('#mainone').empty();
$('#maintwo').empty();
for(var j=0; j < test1.length; j++){
// use append here, not html
$('#mainone').append('<div id="' + test1[j] + '" class="well">' + test1[j] + '</div>');
}
for(var k=0; k<test2.length; k++){
// use append here, not html
// i also fix your markup ( you were not closing the div properly)
$('#maintwo').append('<div id="' + test2[k] + '" class="well">' + test2[k] + '</div>');
}
}

Edit HTML table and capture changes as POST using Javascript

I just started off with javascript and html, so please correct me if I am doing it the wrong way. I was trying to edit an html form table.
{%extends 'base.html'%}
{%block content%}
<html>
<body>
<h4> Search results</h4>
<p id="data"></p>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
<form id="update" action="/update/" method="POST">
<script>
function onEdit(btn)
{
var id=btn.id;
if(btn.value=="Edit") {
var input = document.getElementsByName("name"+id);
for(i = 0;i < input.length; i++) {
document.getElementById(input[i].id).removeAttribute("Readonly");
} //End of for loop
document.getElementById(id).value="Save";
return false;
}
if(btn.value=="Save") {
for(i = 0;i < input.length; i++) {
document.getElementById(input[i].id).setAttribute("Readonly", "readonly");
}
document.getElementById(id).value="Edit";
return false;
}
} // End of Function onEdit()
{% autoescape off %}
var data = {{ search|safe }}; //This will be the json value returned by django view
{% endautoescape %}
text = ''
var out = "<table style=\"width:50%\">";
out += "<tr>";
out += "<th>Domain</th>";
out += "<th>Points to</th>";
out += "<th>Type</th>";
out += "<th>TTL</th>";
out += "</tr>";
var i
var id = 0;
for ( var i = 0; i < data.records.length; i++) {
id = id + 1;
out += "<tr><td>" +
"<input readonly='readonly' name='name" + id + "' id='" + data.records[i].domain + "' value='" + data.records[i].domain + "'type='text'/>" +
"</td><td>" +
"<input readonly='readonly' name='name" + id + "' id='" + data.records[i].record_points_to + "' value='" + data.records[i].record_points_to +"'type='text'/>" +
"</td><td>" +
data.records[i].record +
"</td><td>" +
"<input readonly='readonly' name='name" + id + "' id='" + data.records[i].ttl + "' value='" + data.records[i].ttl + "'type='text'/>" +
"</td><td>" +
"<input id='" + id + "' value='Edit' onclick='return onEdit(this)' type='button'/>" +
"</td></tr>";
}
out += "</table>"
total = data.meta.total_records
page = data.meta.page
records_returned = data.records.length
records_shown = ((data.meta.page - 1) * 30) + data.records.length
out += records_shown + " returned of " + total
page = data.meta.page + 1
link = window.location.href
if (records_shown == total){
out += " End "
}
else{
url ="<a href='" + updateQueryStringParameter(link, "page", page) + "'> Next"
out += url
}
function updateQueryStringParameter(uri, key, value) {
var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
if (uri.match(re)) {
return uri.replace(re, '$1' + key + "=" + value + '$2');
}
else {
return uri + separator + key + "=" + value;
}
}
document.getElementById("data").innerHTML = out
</script>
<input type="submit" value="Submit">
</form>
I have the page displayed as expected.
What I am trying to achieve is to make these html tables editable, which is also working half way. When I click the Edit button, the table link turns editable, and I can change the value, and the Edit button changes to Save.
But when I click on "Save" button, firebug error shows
TypeError: input is undefined
for(i = 0;i < input.length; i++) {
----------↑
(Yes, arrow points to var i)
I want to capture the changes when I click on Save, and whatever changes in that page should be captured via POST method once clicked on the submit button below. Submit is redirected to action="/update/". Please let me know what should I do.

to avoid such problems please define all variables at the beginning of their scope (the scope is a function in case of Javascript)

add hyperlinks to table entries

I have an html table and I want to hyperlink the entries in one column.
fiddle example here: http://jsfiddle.net/hohenheim/uF4H7/5/ - note once you click on any bar in the graph, there will be an onclick event to show the table.
On the table I want to be able link from clicking on any adId. ie once an adId is clicked it should go to 'www.url.com/adId#. Can this be done in html/js? I've tried creating the link and appending it but haven't had much success. Do I need to refactor how I append entries to the table? Or is it possible rather to create an on-click event on the table?
here is the code on how the table is generated:
function appendAds(date1) {
nonUTCdate = new Date(date1);
UTCdate = new Date(nonUTCdate.getUTCFullYear(), nonUTCdate.getUTCMonth(), nonUTCdate.getUTCDate());
$('#tableTitle').html("<u>Info for " + timeConverter(UTCdate) + ":</u>");
$("#table").find("tr:gt(0)").remove();
$("#table tr").show();
for (var i = 0; i < preGroupData.length; i++) {
if ((date1 >= preGroupData[i].startDate) && (date1 <= preGroupData[i].endDate)) {;
$('#table').append('<tr><td align="center">' + timeConverter(preGroupData[i].startDate) + '</td><td align="center">' + timeConverter(preGroupData[i].endDate) + '</td><td align="center">' + preGroupData[i].adId + '</td><td align="center">' + preGroupData[i].impressions + '</td></tr>');
}
}
}

If I'm understanding you correctly, you can simply turn the column with preGroupData[i].adId into a link to 'www.url.com/#adId' by adding the anchor text to the html string you are inserting into the html.
replace
<td align="center">' + preGroupData[i].adId + '</td>
in your string with:
<td align="center><a href='www.url.com/#" + preGroupData[i].adId +"'>"
+ preGroupData[i].adId + "</a></td>"

the click handler:
$('tr td:nth-child(3)').click(function(){
window.location.href = $(this).text()
}
As an HTTP redirect (back button will not work )
window.location.replace("http://www.google.com");
like if you click on a link (it will be saved in the session history, so back button will work as expected)
window.location.href = "http://www.google.com";

If you save the cell to a variable, you can easily add an "on click" event, like this:
function appendAds(date1) {
nonUTCdate = new Date(date1);
UTCdate = new Date(nonUTCdate.getUTCFullYear(), nonUTCdate.getUTCMonth(), nonUTCdate.getUTCDate());
$('#tableTitle').html("<u>Info for " + timeConverter(UTCdate) + ":</u>");
$("#table").find("tr:gt(0)").remove();
$("#table tr").show();
for (var i = 0; i < preGroupData.length; i++) {
if ((date1 >= preGroupData[i].startDate) && (date1 <= preGroupData[i].endDate)) {;
var row = $("<tr />")
.append("<td align='center'>" + timeConverter(preGroupData[i].startDate) + "</td>")
.append("<td align='center'>" + timeConverter(preGroupData[i].endDate) + "</td>");
var adIdCell = $("<td align='center'>" + preGroupData[i].adId + "</td>").appendTo(row);
row.append("<td align='center'>" + preGroupData[i].impressions + "</td>");
row.appendTo("#table");
adIdCell.on("click", function() {
location.href = "./#" + preGroupData[i].adId;
});
}
}
}

GetElementById not finding ID

Hi I have been working on this code that creates a table with radio buttons for each word. Currently that works perfectly, however I am not making an on click function on the radio button and submit. They both get to the function being called when clicked, but once in the function and i call getElementById to validate or change color the ID is not found or at least thats what I assume because after putting an alert, nothing appears.
I am relatively new at javascript so any advice would help. I was told it might be because they are being called before created but from what I can see in my code thats not the case. Any suggestions?
edit:
This is the code from where trouble arises. Only the spanish once has the on click on it. Didn't put the submit validate because i figured they are the same problem
for (i = 0; i < sentences.length; i++) {
document.write('<p><a onclick ="javascript:ShowHide(\'Sentence' + (i + 1) + '\')" href="javascript:;"><font color="#0000FF"><u>Sentence' + (i + 1) + '</u></font></a></p>');
document.write('<table style="display: none; table-layout: fixed" id="Sentence' + (i + 1) + '" border = "1">');
writeSentence(i, words, "Sentences");
document.write('</table>');
document.write('<input type="checkbox" name="Sentence_lang ' + (i + 1) + '" id = "Sentence_lang ' + (i + 1) + '" value="All_English" /> All English ');
document.write('<input type="checkbox" name="Sentence_lang ' + (i + 1) + '" id = "Sentence_lang ' + (i + 1) + '" value="All_Spanish" /> All Spanish <br />');
}
document.write('</p>')
function writeSentence(i, array, name) {
var Name = name;
document.write('<tr>');
document.write('<td>');
document.write('</td>');
for (j = 0; j < array[i].length; j++) {
var word = array[i][j];
document.write('<td>');
if (Name == "Sentences") document.write('<span class="kept" id="word_' + i + '_' + j + '">');
document.write(word);
if (Name == "Sentences") document.write('</span> ');
document.write('</td>');
}
document.write('</tr>');
document.write('<td>');
document.write('English');
document.write('</td>');
for (j = 0; j < array[i].length; j++) {
document.write('<td>');
document.write('<input type="radio" name="' + Name + (i + 1) + '_' + (j) + '" id="Eng_' + (i + 1) + '_' + (j) + '" value="English" >');
document.write('</td>');
}
document.write('</tr>');
document.write('<tr>');
document.write('<td>');
document.write('Spanish');
document.write('</td>');
for (j = 0; j < array[i].length; j++) {
document.write('<td>');
document.write('<input type="radio" onclick = "color(' + i + ',' + j')" name="' + Name + (i + 1) + '_' + (j) + '" id="Spa_' + (i + 1) + '_' + (j) + '" value="Spanish"> ');
document.write('</td>');
}
document.write('</tr>');
document.write('<tr>');
document.write('<td>');
document.write('Other');
document.write('</td>');
for (j = 0; j < array[i].length; j++) {
document.write('<td>');
document.write('<input type="radio" name="' + Name + (i + 1) + '_' + (j) + '" id="Other_' + (i + 1) + '_' + (j) + '" value="other" > ');
document.write('</td>');
}
document.write('</tr>');
if (Name == "Sentences") for (j = 0; j < array[i].length; j++)
document.write('<input type="radio" input style= "display: none" name="' + Name + (i + 1) + '_' + (j) + '" id="' + Name + (i + 1) + '_' + (j) + '" value="Norm" checked>');
}
function color(i, j,lang) {
var word = document.getElementById('word_' + i + '_' + j + '');
aleart(word);
if (lang == "Spa") word.className = "blue";
}
edit the last if statement is what I'm trying to do. The third parameters is currently empty because i could not figure out how to pass the string Spa properly. But i can go around that if needed.

You've got a typo: aleart(word);, the error should be visible in your console. Change it to alert(word); and the alert box should appear.
Apart from that, you should not use document.write. It won't work once the document is loaded. See Alternatives to document.write or What are alternatives to document.write?