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?
Related
I have a todo site with edit mode and view mode. Full code is at https://repl.it/#UCYT5040/Notekeeper, but this is the JS I am having an issue with.
let editMode = true;
let items = 1
function toggleEditMode() {
console.log(editMode)
if (editMode == true) {
editMode = false;
for (i = 0; i < items; i++) {
document.getElementById('item' + (i + 1)).innerHTML = "<h1 id=\"itemTitle" + (i + 1) + "\">" + document.getElementById('itemTitle' + (i + 1)).value + "</h1>"
}
} else {
editMode = true
for (i = 0; i < items; i++) {
document.getElementById('item' + (i + 1)).innerHTML = "<input type=\"text\" id=\"itemTitle" + (i + 1) + "\" value=\"" + document.getElementById('itemTitle' + (i + 1)).innerHTML + "></input>"
}
}
}
This ends up with
`<div id="item1">
<input type="text" id="itemTitle1" value="New Note">
</h1>
</div>`,
but it should be
`<div id="item1">
<input type="text" id="itemTitle1" value="New Note"></input>.
</div>`.
These are void elements(<input>). This means they aren't designed to contain text or other elements, and as such do not need — and in fact, cannot have — a closing tag in HTML.
document.getElementById('item' + (i + 1)).innerHTML = "<input type=\"text\" id=\"itemTitle" + (i + 1) + "\" value=\"" + document.getElementById('itemTitle' + (i + 1)).innerHTML + "/>"
I receive an array from the controller which I put into the table and generate links to "edit", "delete", and "merge". The "edit" event passes variable to function which opens dialog where variable lSynonyms should be presented as multiline similarly to Synonyms shown in the table. I tried:
lSynonyms += data[i]['varNames'][j]['varTeamID'] + ' > ' + data[i]['varNames'][j]['varName'] + '\r\n';
lSynonyms += data[i]['varNames'][j]['varTeamID'] + ' > ' + data[i]['varNames'][j]['varName'] + '\n';
Both give me error "Unterminated string constant" when I click "edit" link. If I remove \r\n the function is working good except data in textarea is not appeared as new lines. How to pass these new line correctly?
Code which generates table
for (i = 0; i < data.length; i++) {
var Synonyms = '';
var lSynonyms = '';
for (j = 0; j < data[i]['varNames'].length; j++) {
Synonyms += data[i]['varNames'][j]['varTeamID'] + ' > ' + data[i]['varNames'][j]['varName'] + '<br/>';
lSynonyms += data[i]['varNames'][j]['varTeamID'] + ' > ' + data[i]['varNames'][j]['varName'] + "\r\n";
}
$("#teamstable > tbody").append('<tr><td>' + data[i]["stdTeamID"] + '</td><td>' + data[i]["stdName"] + '</td><td>' + Synonyms + '</td><td><a onclick="updateform(' + data[i]["stdTeamID"] + ',\'' + data[i]["stdName"] + '\',\'' + lSynonyms + '\')">edit</a>' + ' <a onclick="mergeform(' + data[i]["stdTeamID"] + ')">merge</a> ' + '<a onclick="RemoveTeam(' + data[i]["stdTeamID"] + ')">delete</a></td></tr>');
}
Function to open dialog:
function updateform(id, rTeam, sTeam) {
$('#id').val(id);
$('#iID').val(id);
$('#sTeam').val(rTeam);
$('#vTeam').val(sTeam);
updatedialog.dialog("open");
}
The dialog which is opening:
<div id="dialog-form" title="Update Dialog">
<form>
<fieldset>
<label for="iID">Match ID</label>
<input type="text" name="iID" id="iID" value="" class="text ui-widget-content ui-corner-all" />
<label for="rTeam">Standardized Name</label>
<input type="text" name="sTeam" id="sTeam" value="" class="text ui-widget-content ui-corner-all">
<label for="sTeam">ID > Known Synonyms</label>
<textarea rows="6" id="vTeam" class="form-control" style="min-width: 100%"></textarea>
<input type="hidden" name="id" id="id" value="" />
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
So, the idea here is that the data variable is available in context. It might be a bit more of a hassle if you don't have it available.
But the idea is that you just need a pointer back to the data, and you can get it later. And you can put the pointer in the HTML in a data- property.
So here, the HTML construction is the same, except that instead of calling updateform from the HTML, you just tell it "use index 0" or whatever. I also added a class onto the links to make them easier to identify when attaching the event handlers.
From that piece of information, you can create the necessary arguments to updateform and call it.
$(function() {
function updateform(id, rTeam, sTeam) {
/* same as before */
console.log(id, rTeam, sTeam);
}
var data = [{
stdTeamID: 912,
stdName: "912",
varNames: [{
varTeamID: 913,
varName: "913"
},
{
varTeamID: 914,
varName: "914"
}
]
}];
for (var i = 0; i < data.length; i++) {
var Synonyms = "";
for (j = 0; j < data[i]['varNames'].length; j++) {
Synonyms += data[i]['varNames'][j]['varTeamID'] + ' > ' + data[i]['varNames'][j]['varName'] + '<br/>';
}
$("#teamstable > tbody").append('<tr><td>' + data[i]["stdTeamID"] + '</td><td>' + data[i]["stdName"] + '</td><td>' + Synonyms + '</td><td><a class="updateform" data-index="' + i + '"">edit</a>' + ' <a onclick="mergeform(' + data[i]["stdTeamID"] + ')">merge</a> ' + '<a onclick="RemoveTeam(' + data[i]["stdTeamID"] + ')">delete</a></td></tr>');
}
$('#teamstable').on('click', '.updateform', function(e) {
var i = parseInt($(this).attr('data-index'), 10);
var teamId = data[i]["stdTeamID"];
var teamName = data[i]["stdName"];
var lSynonyms = "";
for (var j = 0; j < data[i]['varNames'].length; j++) {
lSynonyms += data[i]['varNames'][j]['varTeamID'] + ' > ' + data[i]['varNames'][j]['varName'] + '\r\n';
}
updateform(teamId, teamName, lSynonyms);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="teamstable">
<tbody>
</tbody>
</table>
JavaScript ADODBE connection how to put or between them in query. Need help:
rs.Open("update customer set Name='" + txtname + "',F_Name='" + txtfname + "',Cnic='" + txtcnic + "',Dues='" + txtdues + "',Fees= '" + txtfees + "' where Id = '" + id + "'", connection);
Try this
rs.Open("update customer set Name='" + txtname + "',F_Name='" + txtfname + "',Cnic='" + txtcnic + "',Dues='" + txtdues + "',Fees= '" + txtfees + "' where Id = '" + id + "'", connection);
document.write("<table>");
document.write("<tr>");
for (var i = 0; i < rs.Fields.Count ; i++)
{
document.write("<th style='color: #009900;'>" + rs.Fields(i).Name + "</th>");
}
document.write("</tr>");
while (!rs.EOF) {
document.write("<tr>");
for (var i = 0; i < rs.Fields.Count; i++)
{
document.write("<td >" + rs.Fields(i) + "</td>");
}
document.write("</tr>");
rs.movenext();
}
document.write("");
I am trying to create a function that will allow me to remove an item from the shopping cart of the site I'm working on. I want the last image when clicked to remove that specific item from the list and immediately show it. I don't want to have to refresh the page to see the update. I have tried everything I can find, and tried to kind of reverse engineer my addtocart one from before but I just can't get it. Any help is appreciated!
var x = JSON.parse(sessionStorage.getItem('shoppingList'));
document.write('<table align="center" >');
document.write('<tr>');
document.write('<th>' + " " + '</th>');
document.write('<th>' + "Product" + '</th>');
document.write('<th>' + "Price" + '</th>');
document.write('<th>' + "Quantity" + '</th>');
document.write('<th>' + "Remove" + '</th>');
document.write('</tr>');
for (var i = 0; i < x.length; i++){
document.write('<tr>');
for(var j = 0; j < 1; j++){
document.write('<td align="center">');
document.write('<img src="');
document.write(x[i].itemImageSrc);
document.writeln('"style="height:100px; width:150px;"/>');
document.write('</td>');
document.writeln('<td align="center">' + x[i].itemDescription + '</td>');
document.writeln('<td align="center">' + x[i].itemPrice + '</td>');
document.write('<td align="center">' + "1" + '</td>');
document.write('<td align="center">');
document.write('<img id="can_'+i+'" onclick="removeItem(i)" src="');
document.write("./images/Icons/garbagecan.png");
document.writeln('"style="height:25px; width:20px;"/>');
document.write('</td>');
}
document.write('</tr>');
}
document.write('</table>');
function removeItem(i) {
var list = JSON.parse(sessionStorage.getItem("shoppingList"));
list.pop(document.getElementById("can_'+i+'"));
//x[i] = null;
}
TheChetan was kind of right. What I need to do was add
sessionStorage.setItem("shoppingList", JSON.stringify(list));
window.location.href=window.location.href
to the end of my removeItem function
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>');
}
}