I'm working on multiple arrays and occured to one problem.
When I have only one question div generated I can add additional questions without problem, but if I add another question div, I can't add additional questions to neither of both windows(same applies to any other number too), error which is I get is newdiv[counterq] is undefined. Can anybody help me with this issue? Thanks!
Also, how can I move div AddOption below created new one option input?
I'm new at programming sorry if won't explain in correct terms. Thanks!
Edit: Updated with new problem. Didn't wanted to create seperate topic.
HTML :
var counterq = 0;
var limitq = 3;
var countero = 0;
var limito = 5;
function AddContent(divName) {
countero = 0;
if (counterq == limitq) {
alert("You have reached the limit of adding " + counterq + " inputs");
} else {
var newdiv = new Array()
newdiv[counterq] = document.createElement('div');
newdiv[counterq].className = "ContentWindow[" + counterq + "]";
newdiv[counterq].innerHTML = "<p class='ContentQuestion'>Question " + (counterq + 1) + " </p> <input type='text' class='AddQuestionInput' value='Type your question' name='myQuestion[" + counterq + "]'>";
if (countero == limito) {
alert("You have reached the limit of adding " + countero + " options");
} else {
newdiv[counterq].innerHTML += "<div class='OptionInputOuterWindow'><span class='OptionInputDescription'>Option " + (countero + 1) + "</span> <input type='text' class='AddOptionInput' name='myQuestion[" + counterq + "]"+"[myInputs]"+"[" + countero + "]'></div>";
newdiv[counterq].innerHTML += "<div class='OptionInputOuterWindow'><span class='OptionInputDescription'>Option " + (countero + 2) + "</span> <input type='text' class='AddOptionInput' name='myQuestion[" + counterq + "]"+"[myInputs]"+"[" + (countero+1) + "]'></div>";
document.getElementById(divName).appendChild(newdiv[counterq]);
countero += 2;
AddOption = function() {
var counterq = 0;
var limito = 5;
if (countero == limito) {
alert("You have reached the limit of adding " + countero + " options");
} else {
newdiv[counterq].innerHTML += "<div class='OptionInputOuterWindow'><span class='OptionInputDescription'>Option " + (countero + 1) + "</span> <input type='text' class='AddOptionInput' name='myQuestion[" + counterq + "]"+"[myInputs]"+"[" + countero + "]'></div>";
$("div[class*=ContentWindow]").css("height", "+=27");
countero++;
}
};
}
$(".container").css("height", "+=344");
newdiv[counterq].innerHTML += "<div class='AddOption' onclick='AddOption();'><img src='/img/Plussmall.png'>Add option</div>";
counterq++;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Content"></div>
<div class="AddContent" onclick="AddContent('Content');" >
<img src="/img/Plussmall.png">Add content
</div>
If you want the counter to increase by 2, use countero += 2 instead of countero++.
var counterq = 0;
var limitq = 3;
var countero = 0;
var limito = 5;
function AddContent(divName) {
if (counterq == limitq) {
alert("You have reached the limit of adding " + counterq + " inputs");
} else {
var newdiv = new Array()
newdiv[counterq] = document.createElement('div');
newdiv[counterq].className = 'new-rect';
if (counterq == limito) {
alert("You have reached the limit of adding " + countero + " options");
} else {
newdiv[counterq].innerHTML = "Entry " + (countero + 1) + " <br><input type='text' name='myInputs[" + countero + "]'><br>Entry " + (countero + 2) + " <br><input type='text' name='myInputs[" + countero + "]'><br>";
document.getElementById(divName).appendChild(newdiv[counterq]);
countero += 2;
}
counterq++;
}
}
.new-rect {
width: 300px;
height: 100px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Content"></div>
<input type="button" class="AddContent" value="Add content" onclick="AddContent('Content');">
Related
I have 2 javascript functions , one to add items andd one to remove them . but the created (p) tag isn't removed and if I remove all items tags remain and given ids remain (selected1 , selected2 , ...etc) so how can I remove the complete tag and reset counter
var sum = 0;
var total = 0;
var i = 1;
function additem(name, price) {
document.getElementById("selecteditems").innerHTML += "<p id='selected" + i + "' >" + name;
document.getElementById("pr").innerHTML += "<p id='p" + i + "' >" + price;
document.getElementById("removebtn").innerHTML += "<p id='B" + i + "'>" + "<button id='selected" + i + "' class='btn btn-danger' onclick='removeitem(" + i + " , " + price + " ) ' style='font-size: 15px; height: 20px; padding: 0px 0px 0px 0px;' >Remove</button> ";
i++;
sum += price;
}
function removeitem(i, price) {
document.getElementById("selected" + i).innerHTML = "";
document.getElementById("p" + i).innerHTML = "";
document.getElementById("B" + i).innerHTML = "";
sum -= price;
}
To remove an element by I’d you can use the following function
var removeElement = function(id) {
var element = document.getElementById(id);
element.parentNode.removeChild(element);
};
to remove it from the DOM tree, you would need to run the following JavaScript lines
var elem = document.getElementById("myDiv");
elem.parentNode.removeChild(elem);
If you’re using a JavaScript framework like jQuery, to take an element out of the DOM, you have to use the remove() method:
$('#myDiv').remove();
try this. i have added
var parent = document.getElementById("parentDiv");
to select parent element by id and in second function to remove child element that is inside second function. or you can give me your full code so i can work on it
var sum = 0;
var total = 0;
var i = 1;
var parent = document.getElementById("parentDiv");
function additem(name, price) {
document.getElementById("selecteditems").innerHTML += "<p id='selected" + i + "' >" + name;
document.getElementById("pr").innerHTML += "<p id='p" + i + "' >" + price;
document.getElementById("removebtn").innerHTML += "<p id='B" + i + "'>" + "<button id='selected" + i + "' class='btn btn-danger' onclick='removeitem(" + i + " , " + price + " ) ' style='font-size: 15px; height: 20px; padding: 0px 0px 0px 0px;' >Remove</button> ";
i++;
sum += price;
}
function removeitem() {
var chDiv = document.getElementById("selected" + i);
parent.removeChild(chDiv);
}
I am creating a dynamic list with JS
var obj = JSON.parse(Agent212);
var i;
var serie = "Agent212";
for (i = 0; i < obj.strips.length; i++) {
if (obj.strips[i].Collectie == "0") {
document.write("<li><a onclick='newPage(" + obj.strips[i].Nummer + "," + serie + ")' style = 'color:orange'>" + obj.strips[i].Nummer + " - " + obj.strips[i].Titel + "</a></li>");
}
else if (obj.strips[i].Collectie == "2") {
document.write("<li><a onclick='newPage(" + obj.strips[i].Nummer + "," + serie + ")' style = 'color:red'>" + obj.strips[i].Nummer + " - " + obj.strips[i].Titel + "</a></li>");
}
else {
document.write("<li><a class='ToHide' onclick='newPage(" + obj.strips[i].Nummer + "," + serie + ")'><strike>" + obj.strips[i].Nummer + " - " + obj.strips[i].Titel + "</strike></a></li>");
}
}
when I click on an item in the list, I create a childpage
function newPage(StripNum, SerieNaam) {
var obj = JSON.parse(SerieNaam);
var i;
var x = StripNum;
for (i = 0; i < obj.strips.length; i++) {
if (obj.strips[i].Nummer == x) {
if (obj.strips[i].Collectie == 0) {
var myWindow = window.open();
myWindow.document.writeln('<html>');
myWindow.document.writeln('<head>');
myWindow.document.writeln('<meta name="viewport" content="width=device-width, initial-scale=1">');
myWindow.document.writeln('<link rel="stylesheet" href="./css/W3CSS.css">');
myWindow.document.writeln('<scr' + 'ipt>');
myWindow.document.writeln('function windowClose(){');
myWindow.document.writeln('window.close();}'); **
myWindow.document.writeln('function ToevoegenVerzameling(){'); **
myWindow.document.writeln('window.alert("toegevoegd aan verzameling");');
myWindow.document.writeln('window.close();');
myWindow.document.writeln('}');
myWindow.document.writeln('</scr' + 'ipt>');
myWindow.document.writeln('</head>');
myWindow.document.writeln('<body>');
myWindow.document.writeln('<div class="w3-container w3-display-topmiddle">');
myWindow.document.writeln('<div class="w3-card-16 w3-round-xlarge" style="width:100%">');
myWindow.document.writeln('<a onclick="windowClose();"><center><img src="' + obj.strips[i].Link + obj.strips[i].Nummer + '.jpg"></center></a>');
myWindow.document.writeln('<div class="w3-container w3-margin-top">');
myWindow.document.writeln('<center><B>Nummer: </B><I>' + obj.strips[i].Nummer + '</I></center>');
myWindow.document.writeln('<center><B>Titel: </B><I>' + obj.strips[i].Titel + '</I></center>');
myWindow.document.writeln('<center><button onclick="ToevoegenVerzameling()" class="w3-btn w3-light-grey w3-border w3-border-black w3-round-xlarge w3-margin-top w3-margin-bottom" style="width:100%"><h2><b>Toevoegen</b></h2></button></center>');
myWindow.document.writeln('</div>');
myWindow.document.writeln('</div>');
myWindow.document.writeln('</div>');
myWindow.document.writeln('</body>');
myWindow.document.writeln('</html>');
}
all of the above does work, but know I want to ad a replace function to ToevoegenVerzameling().
I've tried with adding this piece of code.
myWindow.document.writeln('if (window.opener != null && !window.opener.closed){');
myWindow.document.writeln('var str = "<li><a onclick='
newPage(" + obj.strips[i].Nummer + ", " + serie + ")
' style = '
color: orange '>" + obj.strips[i].Nummer + " - " + obj.strips[i].Titel +"</a></li>";');
myWindow.document.writeln('str.replace("<a onclick='
newPage(", " < a class = 'ToHide'
onclick = 'newPage(");'); myWindow.document.writeln('str.replace("style = '
color: orange '>", "><\strike>");'); myWindow.document.writeln('str.replace("</a>", "</strike></a>");}');
But I can't get it to work, Were am I making a mistake in this?
With the help of http://www.mkyong.com/wp-content/uploads/jQuery/jQuery-add-remove-textbox.html , I got my dynamic inputs and value.
But while adding its concatenating or getting Nan. I need to add values.
var counter = 2;
$("#addButton").click(function () {
if(counter>20){
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html(
' <div class="col-md-6 marg-top-10 "> <input type="text" class="form-control inputData" name="assetDescription' + counter +
'" id="assetDescription' + counter + '" value="" > </input> </div>' +
' <div class="col-md-6 marg-top-10 "> <input type="text" class="form-control inputData" name="textbox' + counter +
'" id="textbox' + counter + '" value="" > </input> </div>'
);
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
for adding value
$("#getButtonValue").click(function () {
console.log("came ");
var msg = '';
var totalvalue;
var result;
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
result += Number($('#textbox' + i).val());
console.log(result);
}
result is = Nan
help please!
try with this..
var result = 0;
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
result += Number($('#textbox' + i).val());
console.log(result);
}
How can I reference my menu button from my script? When I click the button after implementation, it doesn't seem to hold true... Thank you for your help! The problem here is specifically directed towards the if statement in the bottom script where it states if(data_type ==1){ do something}.
var data_type = 0;
function data() {
data_type = 1;
}
///menu-button///
<li id="menu" onclick="data()" style="max-width:82px">
DATA
</li>
<script>
document.write('<div id="div2" class="wrapper">');
document.write('<ul id="Grid">');
for (var i = 0; i < 33; i++) {
var ch = "";
if (i%3==0) { ch="E"; } else if (i%3==1) { ch="C"; } else { ch="W"; }
document.write('<li id="mE'+ i + '" class="mix ' + sortSettings[i][0] + ' ' + i
+ '" onclick="imgClicked(' + i + ')" > <div class="content"> <div><img class="bImg" id="imgI' + i
+ '" src="ico1.jpg" width="145" height="213"></div> <div id="menu"> <img id="gI' + i + '" src="ico1.jpg" width="35" height="35" style="float:left"></div>'
+ '<div id="descNum">' + (Math.floor(i/3)+1) + ch + '</div>'
+ '<div id="desc">' + allSettings[i][1] + '</div>'
+ '<div id="desc">' + allSettings[i][2] + '</div>'
+ '<div id="desc">' + allSettings[i][0] +' '+ allSettings[i][3] + '</div></div></li>');
}
for (var i = 0; i < 11; i++) {
for (var j = 0; j < 3; j++) {
var add = "";
if(data_type == 1){
if (j==0) {
add="E";
$("#imgI" + ((i*3)+j)).attr("src", "Beds/20160530/" + (i+1) + add + "(1).JPG");
} else if (j==1) {
add="C";
$("#imgI" + ((i*3)+j)).attr("src", "Beds/20160530/" + (i+1) + add + "(1).JPG");
} else if (j==2) {
add="W";
$("#imgI" + ((i*3)+j)).attr("src", "Beds/20160530/" + (i+1) + add + "(1).JPG");
}
}
else{
if (j==0) {
add="E";
$("#imgI" + ((i*3)+j)).attr("src", "Beds/20160530/" + (i+1) + add + ".JPG");
} else if (j==1) {
add="C";
$("#imgI" + ((i*3)+j)).attr("src", "Beds/20160530/" + (i+1) + add + ".JPG");
} else if (j==2) {
add="W";
$("#imgI" + ((i*3)+j)).attr("src", "Beds/20160530/" + (i+1) + add + ".JPG");
}
}
}
}
document.write('<li class="gap"></li>');
document.write('</ul>');
document.write('</div>');
</script>
Instead of looping through one time to show
id1
id2
id3
it loops through 3 times before stopping. what can i put to make it loop through only once.
html:
<p id="show_me"></p>
<button onclick="ObjectArray()">click me</button>
javascript:
var ObjectArray = function() {
// object literal
var id1 = {
firstName: "John",
lastName: "Doe",
id: "12345"
};
// keyword new
var id2 = new Object;
id2.firstName = "Adam";
id2.lastName = "Bakely";
id2.id = "abcdef";
// object constructor
function employee(first, last, id) {
this.firstName = first;
this.lastName = last;
this.id = id;
}
var id3 = new employee("Dallas", "Star", "abc123");
//create an array
var IdArray = [id1, id2, id3];
//for loop to display results
var text="";
var i;
for (i = 0; i < IdArray.length; i++){
text += IdArray[0].firstName + " " + IdArray[0].lastName + " " + IdArray[0].id + "<br>";
text += IdArray[1].firstName + " " + IdArray[1].lastName + " " + IdArray[1].id + "<br>";
text += IdArray[2].firstName + " " + IdArray[2].lastName + " " + IdArray[2].id + "<br>";
}
document.getElementById("show_me").innerHTML = text;
}
It iterates three times, because you loop for the length of the array, which has 3 items.
If you want to 'iterate' once, you can just omit the for loop:
text += IdArray[0].firstName + " " + IdArray[0].lastName + " " + IdArray[0].id + "<br>";
text += IdArray[1].firstName + " " + IdArray[1].lastName + " " + IdArray[1].id + "<br>";
text += IdArray[2].firstName + " " + IdArray[2].lastName + " " + IdArray[2].id + "<br>";
But I think you actually wanted to do this:
for (i = 0; i < IdArray.length; i++){
text += IdArray[i].firstName + " " + IdArray[i].lastName + " " + IdArray[i].id + "<br>";
}
That way you use the loop what it's for: Iterate over an array of any length and repeat a piece of code for each item in the array.
Remove everything from the for loop, and add this instead:
text += IdArray[i].firstName + " " + IdArray[i].lastName + " " + IdArray[i].id + "<br>";
Every thing is fine ... but please replaced the following code
for (i = 0; i < IdArray.length; i++){
text += IdArray[i].firstName + " " + IdArray[i].lastName + " " + IdArray[i].id + "<br>";
text += IdArray[1].firstName + " " + IdArray[1].lastName + " " + IdArray[1].id + "<br>";
text += IdArray[2].firstName + " " + IdArray[2].lastName + " " + IdArray[2].id + "<br>";
}
with
for (i = 0; i < IdArray.length; i++){
text += IdArray[i].firstName + " " + IdArray[i].lastName + " " + IdArray[i].id + "<br>";
}