We Keep Coding

getting the variable's value from another funtion

Is there a way to get the 'username' and 'questionid' variable's value in my send() function like how I did with inputText?
var username;
var questionid;
function renderHTML(data) {
var htmlString = "";
var username = data[0].username;
//var examid = data[1].examid;
var questionid = data[2].questionid;
for (var i = 0; i < data.length; i++) {
htmlString += "<p>" + data[i].questionid + "." + "\n" + "Question: " + data[i].question + "\n" + "<input type='text'>";
htmlString += '</p>';
}
response.insertAdjacentHTML('beforeend', htmlString);
}
function send() {
var inputText = document.querySelectorAll("input[type='text']");
var data = [];
for (var index = 0; index < inputText.length; index++) {
input = inputText[index].value;
data.push({
'text': input
});
}
console.log(data);

You do not need var before username and questionid in your renderHTML function, as they have already been defined:
var username;
var questionid;
function renderHTML(data) {
var htmlString = "";
username = data[0].username;
//var examid = data[1].examid;
questionid = data[2].questionid;
for (var i = 0; i < data.length; i++) {
htmlString += "<p>" + data[i].questionid + "." + "\n" + "Question: " + data[i].question + "\n" + "<input type='text'>";
htmlString += '</p>';
}
response.insertAdjacentHTML('beforeend', htmlString);
}
function send() {
var inputText = document.querySelectorAll("input[type='text']");
var data = [];
for (var index = 0; index < inputText.length; index++) {
input = inputText[index].value;
data.push({
'text': input
});
}
console.log(data);

Make a selectable html table with objects as values

I am been trying to create a html table that is populated by objects.
The table was supposed to be selectable by row (via hover), when the row was hovered over a function ran.
The table headers are in an array:
var topTitles = ["Type","Origin","Destination","T","A","G"];
all the data are sitting inside arrays,
var Type = [];
var Origin = [];
var Destination = [];
var T = [];
var A = [];
var G = [];
I tried to modify an example piece of code, but it was very difficult to conceptualize it and place it into a programatic solution. What is an easy way to map such data directly into a interactive table.
function createTable() {
var table = document.getElementById('matrix');
var tr = addRow(table);
for (var j = 0; j < 6; j++) {
var td = addElement(tr);
td.setAttribute("class", "headers");
td.appendChild(document.createTextNode(topTitles[j]));
}
for (var i = 0; i < origins.length; i++) {
var tr = addRow(table);
var td = addElement(tr);
td.setAttribute("class", "origin");
td.appendChild(document.createTextNode(mode[i]));
for (var j = 0; j < topTitles.length; j++) {
var td = addElement(tr, 'element-' + i + '-' + j);
td.onmouseover = getRouteFunction(i,j);
td.onclick = getRouteFunction(i,j);
}
}
}
function populateTable(rows) {
for (var i = 0; i < rows.length; i++) {
for (var j = 0; j < rows[i].elements.length; j++) {
var distance = rows[i].elements[j].distance.text;
var duration = rows[i].elements[j].duration.text;
var td = document.getElementById('element-' + i + '-' + j);
td.innerHTML = origins[i] + "<br/>" + destinations[j];
}
}
}
if (highlightedCell) {
highlightedCell.style.backgroundColor="#ffffff";
}
highlightedCell = document.getElementById('element-' + i + '-' + j);
highlightedCell.style.backgroundColor="#e0ffff";
showValues();
}

This is probably the easiest way I could think of building the table without changing your data structure and make it very clear where all the data is coming from. It is defiantly not the best code, but it should work for your situation.
CodePen
var topTitles = ["Type","Origin","Destination","T","A","G"];
var Type = ["Type1", "type2", "type3"];
var Origin = ["Origin1", "origin2", "origin3"];
var Destination = ["Destination1", "Destination2", "dest3"];
var T = ["t1", "t2","T3"];
var A = ["steaksauce", "a2", "a3"];
var G = ["G1", "G2", "G3"];
var appendString = [];
for(var i =0; i < topTitles.length; i++){
if(!i){
appendString.push("<tr><td>" + topTitles[i] + "</td>");
}
else if(i === topTitles.length -1){
appendString.push("<td>" + topTitles[i] + "</td></tr>");
}
else{
appendString.push("<td>" + topTitles[i] + "</td>");
}
}
for(var i =0; i < Type.length; i++){
appendString.push("<tr><td>" + Type[i] + "</td><td>" + Origin[i] + "</td><td>" + Destination[i] + "</td><td>" + T[i] + "</td><td>" + A[i] + "</td><td>" + G[i] + "</td></tr>");
}
var table = document.getElementById('table');
table.innerHTML = appendString.join('');

Unexpected end of input JavaScript

Can somebody please tell me what is wrong with the JavaScript in this code? It said "Unexpected end of input", but I do not see any errors. All my statements seem to be ended at some point, and every syntax checker says that no errors were detected.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>Slide Editor</title>
<style>
#font-face {
font-family: SegoeUILight;
src: url(Segoe_UI_Light.ttf);
}
* {
font-family: SegoeUILight;
}
</style>
<script src="Slide/RevealJS/lib/js/html5shiv.js"></script>
<script src="Slide/RevealJS/lib/js/head.min.js"></script>
</head>
<body onload="editSlideshow()">
<div id="sl">
<span id="sls"></span>
</div>
<span id="slt"></span>
<div id="editor">
</div>
<script>
function getURLParameters(paramName) {
var sURL = window.document.URL.toString();
if (sURL.indexOf("?") > 0) {
var arrParams = sURL.split("?");
var arrURLParams = arrParams[1].split("&");
var arrParamNames = new Array(arrURLParams.length);
var arrParamValues = new Array(arrURLParams.length);
var i = 0;
for (i = 0; i < arrURLParams.length; i++) {
var sParam = arrURLParams[i].split("=");
arrParamNames[i] = sParam[0];
if (sParam[1] != "")
arrParamValues[i] = unescape(sParam[1]);
else
arrParamValues[i] = "No Value";
}
for (i = 0; i < arrURLParams.length; i++) {
if (arrParamNames[i] == paramName) {
//alert("Parameter:" + arrParamValues[i]);
return arrParamValues[i];
}
}
return "No Parameters Found";
}
}
var name = getURLParameters("show");
var slideCount = 1;
function editSlideshow() {
if (localStorage.getItem("app_slide_doc_" + name) == null) {
$("#sls").append('<button onclick = "loadSlide\'1\')" id = "slide_1">Slide 1</button>');
$("#sl").append('button onclick = "newSlide()">New Slide</button>');
slideCount = 1;
} else {
var textArray = JSON.parse(localStorage.getItem("app_slide_doc_" + name));
slideCount = textArray.length;
var slideCnt = textArray.length - 1;
for (var i = 0; i <= slideCnt; i++) {
$("#sls").append('<button onclick = "loadSlide\'' + (i + 1) + '\')" id = "slide_' + (i + 1) + '">Slide ' + (i + 1) + '</button>');
};
$("sl").append('<button onclick = "newSlide()">New Slide</button>');
};
};
function loadSlide(num) {
var array = JSON.parse(localStorage.getItem("app_slide_doc_" + name));
if (array == null) {
document.getElementById("editor").innerHTML = "<p><textarea rows = '15' cols = '100' id = 'editTxt'></textarea></p>";
document.getElementById("slt").innerHTML = "Slide " + num;
$("#editor").append("<p><button onclick = 'saveSlide(\"" + num + "\")'>Save Slide</button><button onclick = 'deleteSlide(\"" + num + "\")'>Delete Slide</button></p>");
} else if (array[num - 1] == null) {
document.getElementById("editor").innerHTML = "<p><textarea rows = '15' cols = '100' id = 'editTxt'></textarea></p>";
document.getElementById("slt").innerHTML = "Slide " + num;
$("#editor").append("<p><button onclick = 'saveSlide(\"" + num + "\")'>Save Slide</button><button onclick = 'deleteSlide(\"" + num + "\")'>Delete Slide</button></p>");
} else {
var slideArray = JSON.parse(localStorage.getItem("app_slide_doc_" + name));
var text = slideArray[num - 1];
document.getElementById("editor").innerHTML = "<p><textarea rows = '15' cols = '100' id = 'editTxt'></textarea></p>";
document.getElementById("editTxt").value = text;
document.getElementById("slt").innerHTML = "Slide " + num;
$("#editor").append("<p><button onclick = 'saveSlide(\"" + num + "\")'>Save Slide</button><button onclick = 'deleteSlide(\"" + num + "\")'>Delete Slide</button></p>");
};
};
function saveSlide(num) {
if (localStorage.getItem("app_slide_doc_" + name) == null) {
var text = document.getElementById("editTxt").value;
var textArray = new Array();
textArray[num - 1] = text;
localStorage.setItem("app_slide_doc_" + name, JSON.stringify(textArray));
} else {
var textArray = JSON.parse(localStorage.getItem("app_slide_doc_" + name));
var text = document.getElementById("editTxt").value;
textArray[num - 1] = text;
localStorage.setItem("app_slide_doc_" + name, JSON.stringify(textArray));
};
};
function newSlide() {
var nextSlide = slideCount + 1;
$("#sls").append('<button onclick = "loadSlide(\'' + nextSlide + '\')" id = "slide_' + nextSlide.toString() + '">Slide ' + nextSlide.toString() + '</button>');
slideCount = nextSlide;
};
function deleteSlide(num) {
if (localStorage.getItem("app_slide_doc_" + name) == null) {
if (num !== "1") {
$("#slide_" + num).remove();
document.getElementById("editor").innerHTML = "";
document.getElementById("slt").innerHTML = "";
slideCount = slideCount - 1;
location.reload();
} else {
alert("The first slide cannot be deleted.");
};
} else {
var textArray = JSON.parse(localStorage.getItem("app_slide_doc_" + name));
if (num !== "1") {
$("#slide_" + num).remove();
document.getElementById("editor").innerHTML = "";
document.getElementById("slt").innerHTML = "";
slideCount = slideCount - 1;
textArray.splice((num - 1), 1);
localStorage.setItem("app_slide_doc_" + name, JSON.stringify(textArray));
location.reload();
} else {
alert("The first slide cannot be deleted.");
};
};
};
</script>
</body>
</html>

You've gotten the punctuation wrong in more than one of your onclick attributes, for instance here:
$("#sls").append('<button onclick = "loadSlide\'1\')" id = "slide_1">Slide 1</button>');
It's missing the opening parenthesis. The reason syntax checks don't immediately catch this is because you're putting code inside a string. Which you should not do.
Since you're using jQuery, how about using .click(function() { ... }) instead of inline attributes? Just be careful to get your captured variables correct.

The problem at line 63
$("#sl").append('button onclick = "newSlide()">New Slide</button>');
Should be:
$("#sl").append('<button onclick = "newSlide()">New Slide</button>');

Uncaught TypeError: Object [object Object] has no method 'tableRow' [duplicate]

This question already exists:
Update javascript table: Uncaught TypeError: Object [object Object] has no method 'tableRow'
Closed 9 years ago.
I'm creating a contacts book and wanting a table to update as the user inputs the data, but I keep getting this error about 'tableRow'. I've tried changing it to different function names etc. but can't seem to find the solutions.
var nameField, addressField, emailField, postcodeField;
function twoDigit(v){
if(v.toString().length < 2){
return "0"+v.toString();
} else {
return v.toString();
}
}
var Contact = function(name, address, email, postcode){
this.name = name;
this.address = address;
this.email = email;
this.postcode = postcode;
this.completed = false;
};
var contacts = [];
Contact.prototype.toString = function(){
var s = this.name + '\n' + this.address + '\n' + this.email + + '/n'
+ this.postcode.toString() + '\n';
if(this.completed){
s += "Completed\n\n";
} else {
s += "Not Completed\n\n";
}
return s;
};
Contact.prototype.tableRow = function(){
var tr = "<tr><td>" + this.name + "</td><td>" +
this.address + "</td><td>" + this.email +
"</td><td>" + this.address + ">";
};
var addContact = function(nameField, addressField, emailField, postcodeField){
a = new Contact(nameField.value, addressField.value, emailField.value,
postcodeField.value;
contacts.push(a);
};
var clearUI = function(){
var white = "#fff";
nameField.value = "";
nameField.style.backgroundColor = white;
addressField.value = "";
addressField.style.backgroundColor = white;
emailField.value = "";
emailField.style.backgroundColor = white;
postcodeField.value = "";
postcodeField.style.backgroundColor = white;
};
var updateList = function(){
var tableDiv = document.getElementById("table"),
table = "<table border='1'><thead><th>Name</th><th>Address</th>
<th>Email</th><th>Postcode</th><th>Completed</th></thead>";
for(var i=0, j=contacts.length; i<j; i++){
var contacts1 = contacts[i];
table += contacts1.tableRow();
}
table+="</table>";
tableDiv.innerHTML = table;
};
var add = function(){
addContact(nameField, addressField, emailField, postcodeField);
clearUI();
updateList();
};
var cancel = function(){
clearUI();
updateList();
};
window.onload = function(){
nameField = document.getElementById("name");
addressField = document.getElementById("address");
emailField = document.getElementById("email");
postcodeField = document.getElementById("postcode");
okButton = document.getElementById("ok");
okButton.onclick = add;
cancelButton = document.getElementById("cancel");
cancelButton.onclick = cancel;
clearUI();
};
var showTable = function(){
var tableDiv = document.getElementById("table"),
table = "<table border='1'><thead><th>Name</th><th>Address</th>
<th>Email</th><th>Postcode</th></thead>";
for(var i=0, j=contacts.length; i<j; i++){
var contacts1 = contacts[i];
table += contacts1.tableRow();
}
table+="</table>";
tableDiv.innerHTML = table;
};

Add a tableRow function to Contact
Contact.prototype.tableRow = function() {
return '<tr>' + '<td>' + this.name + '</td>' + '<td>' + this.address + '</td>' + '<td>' + this.email + '</td>' + '<td>' + this.postcode + '</td>' + '</tr>';
}

MultiSelect : Object expected. Jquery does not work in IE. Works well in Firefox

The following Jquery code works well in Firefox but throws exception in IE. Please help. The following code will render a multi select box where you can drag and drop values from one box to other. The code when run in IE throws an object expected expception. As it in inside a large page, the actual place of bug can not be identified.
$(document).ready(function() {
//adding combo box
$(".combo").each(function() {
var name = "to" + $(this).attr('name');
var $sel = $("<select>").addClass("multi_select");
$sel.addClass("combo2");
$sel.attr('id', $(this).attr('id') + "_rec");
$(this).after($sel);
});
$(".multi_select").hide();
var $tab;
var i = 0;
var temp = 0;
//creating different div's to accomodate different elements
$(".multi_select").each(function() {
var $cont = $("#container");
var $input;
if ($(this).hasClass("combo") || $(this).hasClass("combo2")) {
var $col = null;
if ($(this).hasClass("combo")) {
$tab = $("<table>");
$cont = ($tab).appendTo($cont);
var idT = $(this).attr('id');
var $row = $("<tr id='" + idT + "_row1'>").appendTo($tab);
$col = $("<td id='" + idT + "_col1'>").appendTo($row);
$input = $("<input class='searchOpt'></input><img src='images/add.png' class='arrow1'/> ");
$("<div>").addClass('ip_outer_container combo').attr('id', $(this).attr('id') + "out_div").append("<h3 class='header_select'>Tasks</h3>").appendTo($col);
($row).after("<tr><td></td><td><textarea name='" + $(this).attr("name") + "Text' id='" + $(this).attr("id") + "Text'></textarea> </td></tr>");
$cont = $tab;
} else {
var idTm = $(this).attr('id');
var $row2 = $("<tr id='" + idTm + "_row2'>").appendTo($tab);
var $col2 = $("<td id='" + idTm + "_col2'>").appendTo($row2);
$input = $("<input class='searchOpt'></input>");
$("<div>").addClass('ip_outer_container combo2').attr('id', $(this).attr('id') + "out_div").append("<h3 class='header_select'>Tasks</h3>").appendTo($col2);
}
} else {
$("<div>").addClass('ip_outer_container' + classSelect).attr('id', $(this).attr('id') + "out_div").append("<h3 class='header_select'>Tasks</h3>").appendTo($cont);
}
$("<div>").addClass('outer_container').attr('id', $(this).attr('id') + "_div").appendTo('#' + $(this).attr('id') + "out_div");
$($input).appendTo("#" + $(this).attr('id') + "out_div");
});
//adding options from select box to accomodate different //elements
$(".multi_select option").each(function() {
$(this).attr('id', $(this).parent().attr('id') + "option_" + i);
var val = $(this).val().replace("#comment#", "");
var $d = $("<div class='multi_select_div'>" + val + "</div>").attr('id', $(this).parent().attr('id') + 'option_div_' + i);
$d.appendTo("#" + $(this).parent().attr('id') + "_div");
i++;
});
//delete function
$(".delete").click(function() {
$(this).parent().remove();
});
//input
$(".searchOpt").keyup(function() {
$(this).prev().children().show();
var val = $(this).val();
if (val != "") {
var selId = $(this).prev().attr('id');
selId = selId.replace("_div", "option_div");
$(this).prev().children().not("div[id^=" + selId + "]:contains(" + val + ")").hide();
//var $d=$('div[id^="multi_select_senoption_div"]');
//$('div[id^="multi_select_senoption_div"]').not('div[id^="multi_select_senoption_div"]:contains("xls")').hide();
}
});
var optionId = 0;
$(".arrow1").click(function() {
var divId = $(this).parent().attr("id");
divId = divId.replace("out_div", "");
var textValue = "#comment#" + $("#" + divId + "Text").val();
var selToId = divId + "_rec";
$("#" + divId + " option[selected='selected']").each(function() {
var idOpt = $("#" + selToId).attr("id") + "option_" + optionId;
$opt = $("<option>");
$opt.attr("id", idOpt).attr("value", $(this).val() + textValue);
$("#" + selToId).append($opt);
var value = $(this).val().replace("#comment#", "");
var divId = $("#" + selToId).attr('id') + 'option_div_' + optionId;
var $de = $("<div class='multi_select_div'><img class='delete' src='images/delete.png'></img>" + value + "</div>").attr('id', divId);
$de.appendTo("#" + $("#" + selToId).attr('id') + "_div");
$("#" + divId).bind("click", handler);
var optId = divToOption($(this).attr("id"));
var optValue = $(optId).val();
var comment = optValue.substring(optValue.indexOf("#comment#") + 9);
$("#" + divId).attr("title", textValue.replace("#comment#", ""));
//$("#"+divId).bind("mouseenter",handler2);
//$("#"+divId).bind("mouseleave",handler3);
$(".delete").bind("click", handler1);
optionId++;
});
// function code
//
});
$(".multi_select_div").click(function() {
var id = divToOption($(this).attr('id'));
var selected = $(id + "[selected]");
if (selected.length > 0) {
$(id).attr('selected', false);
var cssObj = {
'background-color': 'black'
};
$(this).css(cssObj);
}
else {
$(id).attr('selected', 'selected');
var cssObj = {
'background-color': 'orange'
};
$(this).css(cssObj);
}
});
function handler(event) {
var id = divToOption($(this).attr('id'));
var selected = $(id + "[selected]");
if (selected.length > 0) {
$(id).attr('selected', false);
var cssObj = {
'background-color': 'black'
};
$(this).css(cssObj);
}
else {
$(id).attr('selected', 'selected');
var cssObj = {
'background-color': 'orange'
};
$(this).css(cssObj);
}
}
function handler1(event) {
$(this).parent().remove();
}
function handler2(event) {
var optId = divToOption($(this).attr("id"));
var optValue = $(optId).val();
var comment = optValue.substring(optValue.indexOf("#comment#") + 9);
var pos = $(this).position();
var cssObj = {
top: pos.top - 100,
left: pos.left + 200
};
var $divImg = $("<td>");
var $divCl = $("<div class='comment'>" + comment + "</div>").css(cssObj);
$divImg.append($divCl);
$(this).parent().parent().parent().parent().append($divImg);
}
function handler3(event) {
$(".comment").remove();
}
});
function optionToDiv(option) {
var id_div = option.replace('option_', 'option_div_');
id_div = "#" + id_div;
return id_div;
}
function divToOption(div) {
var id_opt = div.replace('div_', '');
id_opt = "#" + id_opt;
return id_opt;
}​

IE browsers do not support indexOf for an array, which arises issue with javascript.
Add the below javascript in the head of the page, it might resolve your issue:
//
// IE browsers do not support indexOf method for an Array. Hence
// we add it below after performing the check on the existence of
// the same.
//
if (!Array.prototype.indexOf)
{
Array.prototype.indexOf = function (obj, start)
{
for (var i = (start || 0), j = this.length; i < j; i++)
{
if (this[i] === obj)
{
return i;
}
}
return -1;
};
}