We Keep Coding

How can I access form input from an input field which was created dynamically via a Javascript function?

I'm new to programming and hope you can help me out with this little number comparison game that I'm trying to build.
I have two functions. The first function creates the playing field in HTML via a button press. One of the elements created on the playing field is an input field where the player can enter their guess.
In the second function I compare two numbers - the one that was generated randomly and the one that was input by the player. Unfortunately I can't access the number which was entered by the player.
Maybe someone has got an idea. Thank you very much.
This is what the functions look like:
function startGame(){
(...)
const inputField = document.createElement("input");
inputField.setAttribute("type", "number");
inputField.setAttribute("id", "guess");
document.getElementById("guess").appendChild(inputField);
}
function compareInput(){
let inputValue = document.getElementById("guess").value;
(...)
}

You're trying to append "guess" to itself. That doesn't work like that. Try to append it to another div or body.
You have two elements with the same ID.
The first is the wrapper and the second is the input. Hence ur function compareInput() is trying to get the value of the wrapper.

I implemented a proof-of-concept, which probably differs from your requirements, but it should help you finding the right path. First, let's make sure that the new field has a value. Next, make sure that we append it to document rather than itself.
function startGame(){
const inputField = document.createElement("input");
inputField.setAttribute("type", "number");
inputField.setAttribute("id", "guess");
inputField.value = parseInt(Math.random() * 10) + 1;
document.body.appendChild(inputField);
}
function compareInput(){
let inputValue = document.getElementById("guess").value;
console.log(inputValue);
}
startGame();
compareInput();

save subset of dom for later use preserve eventlisteners and values entered

Hello Guys is there any method I can save a part (subtree) of the DOM for later use?
What I want to achieve is the following:
I create a two forms with pure javascript.
form1 = document.createElement('form1');
input = document.createElement('input');
input.addEventListener(Listener);
form1.appendChild('input');
....
The forms are build the same way.
Somewhere I have a div in my page whereto I appendChild('form1');
Suppose I have also a button on my page. The button should switch between the forms. So when I push it I want to SAVE THE STATE OF form1 (I want to keep the eventlisteners attached and also the texts that the user entered in input fields) for example in a variable and remove(detach) after the form1 from the DOM and bind form2.
I know this could be solved with css and toggle the forms by making one hidden and the other visible but I'm in fact interested in saving the subtree of the DOM as a snapshot.
I hope you understand my question since English is not my native language.
Thanks in advance.

The button should switch between the forms. So when I push it I want
to SAVE THE STATE OF form1 (I want to keep the eventlisteners attached
and also the texts that the user entered in input fields)
The createElement creates an element and returns it as a reference which you store in a variable. Note that this is a live reference. You could take advantage of that in this use-case.
Caution: Do NOT use this on production. This is not recommended. Use simple UI/UX elements to show/hide parts of your page by way of
CSS and/or Javascript. The example below is solely to demonstrate the way things work.
Store the references to your forms in variables. Use appendChild to add those to your container. Overwrite innerHTML to remove the element from the container, and use appendChild again to swap with the other variable. All event handlers, and the input element states will be saved as-is, because of the variable being a reference.
Example: (Type different values in inputs to see state while switching.)
var forms = [],
btn = document.getElementById('btn'),
display = document.getElementById('display'),
result = document.getElementById('result'),
currentForm = 0;
;
start();
function start() {
btn.addEventListener('click', switcher);
forms[0] = createForm(0);
forms[1] = createForm(1);
display.appendChild(forms[0]);
}
function switcher() {
display.innerHTML = '';
if (currentForm === 0) {
display.appendChild(forms[++currentForm]);
} else {
display.appendChild(forms[--currentForm]);
}
}
function createForm(idx) {
var frm, inp, lbl;
frm = document.createElement('form');
inp = document.createElement('input');
inp.addEventListener('input', show);
lbl = document.createElement('label');
lbl.textContent = "Form # " + (idx + 1) + ": ";
frm.appendChild(lbl);
frm.appendChild(inp);
return frm;
}
function show(e) { result.textContent = e.target.value; }
<button id="btn">Switch</button>
<hr>
<div id="display"></div>
<hr>
<span>Keeping typing in the input above: </span><span id="result"></span>
As mentioned before, use document fragment for storing the fragments which you can refer later.

If I understand your question correctly, the Document.createDocumentFragment() is not too suitable in your case because you need to keep changes after the fragmented piece of document will be inserted into the renderer (into the "real" page's DOM)?
If so, then you could try to use experimental createHTMLDocument() and store it somewhere (in localStorage for example) what gives you the ability to synchronise both documents - your "real" one and it's copy.
But actually this question includes also avoiding superfluous repaint/reflow etc so it is a good moment to dive into documentation ;)

Get current field name in to change display option?

I've looked all afternoon to try and find this one. Basically, I want get the name of the current text field and change the display value to noPrint if the text field value is "--". I'm running this as a validation script in a PDF. Any help is much appreciated!
if(event.value == '--')
{
event.target.name.display = event.target.name.display.noPrint;
} else
{
event.target.name.display = event.target.name.display.visible;
}

You have a couple of things a bit off.
event.value doesn't exist (you can check the available event properties)
If you want to get the value of the element that triggered the event you can do:
var elemValue = event.target.value;
If you want to get the name for the same element you can do:
var elemName = event.target.name;
To hide the element from printing, you can see this answer.

proper coding with array.push

I've found some code on a site and been tinkering with it a little. It involves some functions to add and delete students (the add code is below) from an array - into a value field. I can't figure out why in tarnations we need this extra piece of code, however.
Here is the js code:
var students = ['Paulie', 'Nicole', 'Kevin', 'Mare'];
function addClick(){
var addRemove = document.getElementById('addRemoveStudent');
var studentsBox = document.getElementById('studentsBox')
students.push(addRemove.value);
addRemove.value = '';
studentsBox.value = students.join(', ');
}
My question is: Why do we need the addRemove.value = ''; line? I've tested it without that code and it still works fine. Is there a reason we need that?
I can send more code including the HTML but didn't what to overwhelm anyone with the volume.
Thanks so much in advance!
-Anthony

It's not necessary. I guess semantically it means to clear the addRemove box first before replacing the value.

It's optional, but it's simply to clear the text box so the user can enter a brand new value if they want to run the function again.

To clear the value of the addRemoveStudent ( I think it is a input type="text") Just for it, It is not needed in the array. Just to clear the value of that control.

Presumably addRemove is an input element. Setting the value property of an input element to an empty string '' means that the input is emptied: it will have no text in it.
My guess is that this function is run when a button is clicked, so it adds a new student to the array, updates the studentsBox field with the right data, and clears the input element so you can add more if the user wishes to do so.

How can I dynamically construct a document element string using a variable in Javascript?

This is driving me nuts, and I'm sure it's both possible and surely simple to do.
I have a page with a whole bunch of dynamically created forms on it. In one of my functions, I need to access one of those forms, so I pass the name of the form in a variable.
Then I need to access the name of that form using the document tree.
However, when I put in the variable, it assumes the name of the variable is the name of the form.
So this does not work:
function myAwesomeFunction(nameOfForm)
{
var selection = document.nameOfForm.nameOfInput.selectedIndex;
}
So I looked around the net and saw that I need to use bracket notation, but this doesn't work either:
function myAwesomeFunction(nameOfForm)
{
var selection = document[nameOfForm].nameOfInput.selectedIndex;
}
I also tried with some quotation action:
function myAwesomeFunction(nameOfForm)
{
var selection = document['nameOfForm'].nameOfInput.selectedIndex;
}
... but no joy.
So, where am I going wrong?
For bonus points... what if both the name of the form and the name of the particular input were both dynamic? Then what?
function myAwesomeFunction(nameOfForm, nameOfInput)
{
var selection = document[nameOfForm][nameOfInput].selectedIndex;
}

Look them up in the forms object - this won't work since it is an array and not an object.
use document.getElementsByName
function myAwesomeFunction(nameOfForm, nameOfInput)
{
var selection = document.getElementsByName(nameOfForm)[nameOfInput].selectedIndex;
}
or even better, set an id attribuite on the form and use document.getElementById to find the form

Try using document.getElementById(nameOfForm) (if you have the ID on the form as well)...
If you can include a jQuery reference to your page, you can easily do the following (again assuming you have the ID on the form):
function myAwesomeFunction(nameOfForm, nameOfInput)
{
var form = $("form#" + nameOfForm);
var input = $("#" + nameOfInput + ":input");
var selection = $(input).val();
}

function focusElement(formName, elemName) {
var elem = document.forms[formName].elements[elemName];
}
try this
formname is name of the form and elemname is input label name