We Keep Coding

How can i append a child to a div that has a random number as an id?

READ THE EDIT AT THE BOTTOM! :)
I am making a little website where the user can fill in multiple text boxes, and when they come back later, their text boxes come back. (Pretty much a terrible helpdesk system using localstorage).
I have three fields the user can fill out, then when the fields are submitted they should appear below, in a div. Currently i am only able to get the first field to be shown, as i append it to a static div, but i want to append the rest of the fields to the first one. This wouldnt be too hard, but i cant seem to append a child to a div that doesnt have a set ID (without somehow hardcoding it).
I have tried things like
divAId + i.appendChild(divB)
And
var divAIdNumber = divAId + i;
divAIdNumber.appendChild(divB);
, but nothing seems to work.
Here is the code in question:
gradStorages = JSON.parse(localStorage.getItem('gradStorages'));
var iFeil = 0;
function feilDivCreate(){
const divF = document.createElement("div");
divF.className = "feilDiv";
divF.id = "feilDivId" + iFeil;
listIdIncrement();
divF.appendChild(document.createTextNode(set1));
textContainer2.appendChild(divF);
iFeil += 1;
}
var iOffer = 0;
var feilIdNumber = "feilId";
function offerDivCreate(){
const divO = document.createElement("div");
divO.className = "offerDiv";
divO.id = "offerDivId" + iOffer;
listIdIncrement();
divO.appendChild(document.createTextNode(set1));
feilIdNumber + iOffer.appendChild(divO);
iOffer += 1;
console.log(feilIdNumber + "TATATATAT");
}
var set1 = "set1 Not Defined";
var set2 = "set2 Not Defined";
var set3 = "set3 Not Defined";
function extract(){
for(let i = 0; i < feilStorages.length; i++){
set1 = feilStorages[i];
set2 = offerStorages[i];
set3 = gradStorages[i];
feilDivCreate();
offerDivCreate();
gradDivCreate(); // same as offerDiv
}
}
(can add more, or make a jsfiddle if needed.)
I need a way to append offerDiv to feilDiv, but its not so simple because feilDiv's id is feilDivId + i where i goes up by one for each new feildiv added.
Any tips for how i can achieve this?
EDIT: Here is a simplified version, showing all the code necessary to understand what im trying to do. https://codepen.io/kossi1337/pen/xxKPRvv
Might be easier to just make a new question with all the new code, but im not too sure if that allowed.. Let me know if i have to change anything about my question :)

In this code:
var divAIdNumber = divAId + i;
divAIdNumber.appendChild(divB);
It seems like you are trying to append an element to the Integer value you just created by adding i to some number. You need to grab the parent node, either via document.querySelector or using jQuery, then append to the parent. The browser has no idea what to do when you try to append markup to a number. It expects a DOM location that it will be appended to.
It should be like this:
var divAIdNumber = divAId + i;
var html = "<div class='" + divAIdNumber + "'> Content here </div>";
var element = document.querySelector(".my-element");
element.appendChild(html);

How to append '#' to the value in Javascript

Can anyone please help me how to append '#' to the value as below:
My code is below:
var idselvalue = '#'+idvalue;
console.log("IDSELVALUE"+idselvalue); // Printing as ::: #"T2"
( I want this to be printed as "#T2" so that I want to include the below)
$('#idselvalue').val(usrObj); // to display the selected option in the select box
if I hard the value as below:
$('#T2').val("26");
I also need help how to retrieve all the selected options, as of now I'm able to get only one first selected option
Below is my code:::
$(document).ready(function () {
var usrObj = getCookie("selectedEXP");
var idvalue = getCookie("selectedIDValue");
var idselvalue = '#'+idvalue;
console.log("IDSELVALUE"+idselvalue);
$('#idselvalue').val(usrObj);
console.log("OnLoad Calling usrObj"+usrObj);
console.log("OnLoad Calling idvalue"+idvalue);
//Printing only one selected options
});
Appreciate your help! Thanks in advance :)

Try using the following:
var idselvalue = function(d){return "#"+idvalue;}
along with scrappedcola's suggestion:
$('#idselvalue').val(usrObj); should be $(idselvalue) you already appended a # to the beginning and js can't determine the var from the string, it will just treat the entire thing as a string.

I've solved it by removing the double quotes for the idvalue and userobj as below:
var idselvalue = '#'+idvalue.replace(/\"/g, "");
var selusrObj = usrObj.replace(/\"/g, "");
$(idselvalue).val(selusrObj);
It is working fine...
Thank you!

Accessing textarea value inside td on iframe

I'm freaking out with an issue I cannot solve.
I don't have so much experience with iFrames and jQuery but it's needed to solve this asap because it's a big problem in an app.
I've an iFrame with a div and some rows. I've a textarea and a button whos calling a javascript method who's recovering the value inserted in textarea
But it's not working, either of options I tried have worked.
This is the code, could you help me?
Thank you!
http://pastebin.com/xsWzG2VH
EDIT:
I'm trying to recover the value of TEXTOAYUNTAMIENTO, a textarea inside td structure with that function.
When I press the button to recover it, all of them are empty or null.
This is the method:
function checkayuntamiento(value)
{
alert(value);
alert('Hola');
alert($('#TEXTOAYUNTAMIENTO', window.parent.document).html());
alert('<%=indice%>');
alert('<%=TEXTOAYUNTAMIENTO%>');
alert('<%=DESCMODOENVIO%>');
var valor = document.getElementById("TEXTOAYUNTAMIENTO");
var valor5 = document.getElementsByName('TEXTOAYUNTAMIENTO')[0].value
var valor2 = document.getElementById("TEXTOAYUNTAMIENTO").innerHTML;
//var elem = $('#salida_'+id);
var idi = $("#TEXTOAYUNTAMIENTO").val();
var asdf = $(this).closest('tr').next().find(".AYUNTAMIENTOS").val();
var valor3 = document.getElementById("PRUEBA");
var valor4 = document.getElementById("PRUEBA").innerHTML;
//var elem = $('#salida_'+id);
var idi2 = $("#PRUEBA").val();
var asdf2 = $(this).closest('td').next().find(".PRUEBA").val();
alert(asdf);
alert(idi);
alert(valor);
alert(valor2);
alert(asdf2);
alert(idi2);
alert(valor3);
alert(valor4);
alert(valor5);
}

Extract characters after ?= in link

Can anyone see where I going wrong here, I'm trying to get the last characters after the ?p= in a link and put in a varaible, but the code I'm using returns /.
My code is:
$("#dvPartial").on('click', '.dvPagerCities a', function (event) {
alert('click detected');
var city = ($('input#hdnCountry').val());
alert(city);
var link = $('a').attr('href');
//var getEqualPosition = link.indexOf('?p='); //Get the position of '='
var getEqualPosition = link.indexOf('='); //Get the position of '='
var number = link.substring(getEqualPosition + 1); //Split the string and get the number.
My link is
»
I think what is happening is its picking up the 1st = .
My theory is this.
1) Detect the click event
2) Get the link that caused the event
3) Extract the value of p,
p can be 1 diget, 2 digets or 3 digets.
Any help would be appreciated, as it seems no sooner do I solve 1 problem then another arises.
Thanks
George

Assuming that p is the only parameter in the URL you can simply split by the = sign:
$("#dvPartial").on('click', '.dvPagerCities a', function (event) {
var city = $('input#hdnCountry').val();
var number = $(this).attr('href').split('=')[1];
});

The problem is this part:
var link = $('a').attr('href');
That does not select the link that was clicked, unless you happen to be clicking the very first link present in the HTML of the page. What that will do is select all <a> elements, then return the href attribute of the first one.
Inside your event handler, you want to use this to refer to the link that was clicked:
var link = $(this).attr('href');
// or simply
var link = this.href;

Try with this:
link.split('?p=')[1]

String s = "Jecy penny ? like sears";
String[] arr = s.split("\\?");
Added \\ before ?, as ? has a special meaning
String res = arr[0];
May be you are wrong at escape character for ' ? '
check this link Remove all characters after a particular character

Try this: http://jsfiddle.net/7atyG/1/
$(document).on('click', '.dvPagerCities a', function (ev) {
ev.preventDefault();
var link = $(this).attr('href');
var Linkval = link.substr(link.indexOf('=') + 1);
alert(Linkval);
});

Dynamicaly creating and removing a div

I have been strugling with this for a while and I am sure there is a simple answer to this. What happens is I remove a div called "payment" then dynamicaly create it again so I can add to it. That then gets repeated as the infomation that needs to be added to it changes.
I have mangaged to get this so far.
function clearPage()
{
var d = document.getElementById("contain");
var d_nested = document.getElementById("payment");
var deleteNode = d.removeChild(d_nested);
}
function createPayment()
{
payment = document.createElement("div");
payment.id = "mine";
document.getElementById("contain").appendChild(payment);
}
function printOnPage()
{
var x = names.length;
for( var i = 0 ; i < x ; i++ )
{
var para = document.createElement("p");
var paymentDiv = document.getElementById("payment");
paymentDiv.appendChild(para);
var txtName = document.createTextNode("Item: ");
para.appendChild(txtName);
var txtNameArray = document.createTextNode(names[i]);
para.appendChild(txtNameArray);
var txtQty = document.createTextNode(" Qty: ");
para.appendChild(txtQty);
var txtQtyArray = document.createTextNode(qty[i]);
para.appendChild(txtQtyArray);
var txtCost = document.createTextNode(" Cost: ");
para.appendChild(txtCost);
var txtCostArray = document.createTextNode(prices[i]);
para.appendChild(txtCostArray);
}
}
Related HTML
<div id="contain">
<p>Payment</p>
<div id="payment">
<br />
</div>
</div>
It needs the ID of payment for both my CSS rules and for my creating the text that goes in it.
This is the error I get in FireFox
Error: paymentDiv is null Source File:
http://itsuite.it.brighton.ac.uk/ks339/sem2/javascript/js.js Line: 76
Hope someone can provide some insight in to this and please tell me if I am completly off!
Thanks
Edit: Is it easior to clear the div rather than delete it, how would I go about doing such a thing?

In create_payment(), you set the ID to 'mine'. Shouldn't it be 'payment'?

I do not understand your requirements very well, but anyway you cannot create multiple items in the page using the same id attribute, if you want to duplicate an item and still have control over it, you should be using class instead.
Try switching your code into jquery it will be cleaner and easier to understand for you & me.

Your problem is the fact that in createPayment() you're setting the id to 'mine':
payment.id = "mine";
while later on in printOnPage() you're looking for the element using id 'payment':
var paymentDiv = document.getElementById("payment");

As you mention in your edit, it is far easier just to clear the div than to remove it, specially if you still need it later.
To clear a DIV-block just set it's content to empty:
document.getElementById('payment').innerHTML = "";
I hope you find a solution! Good luck!