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();

Putting a variable into a form using plain Javascript

This is pretty plain and simple but I'm just scratching my head.
I created a form (https://taa.be.wolterskluwer.com/l/940253/2021-10-08/5tgp6n) which contains a field GACLIENTID (I've assigned it the classes GA_Client_ID & GACLIENTID) however since the form is not handcoded the class is assigned to the contacting paragraph (which contains a label & input).
I've successfully pushed my variable using the following script:
<script>
(function() {
var list = document.querySelectorAll('input[name="940253_168501pi_940253_168501"]');
list.forEach(function(el){
if(el) {
el.value = {{DL - GA Client ID}};
}
})
})();
</script>
But this finds the input with the "name" of the field which changes on every clone of the form I'm creating. So I'm looking for a more "universal" way of selecting the input within the class but I just can't, for the life of me, figure out the correct syntax.
Any help is much appreciated.

var list = document.querySelectorAll('.GACLIENTID input');

If there's only ever one matching field.
const input = document.querySelector('.GACLIENTID input');
if (input) {
input.value = {{DL - GA Client ID}};
}

Use app.response to obtain text and then append to text from another field

All,
I have been trying to figure this out for a few days now, but to no avail.
I am trying to use a check mark as the trigger to first ask the user to input some text, and then "concatenate" that text with the text from a previous text field.
I can copy the text form one field to the other, but can not figure out how to incorporate the app.response part of the goal.
Any help would be appreciated
here is what I am using currently and it is located in Actions as a "Mouse up - Run a Javascript"
var fFrom = this.getField("MOB Address");
var fTo = this.getField("Relative");
if(event.target.value=="Off"){
fTo.readonly=false;
fto.value="";
}else{
fTo.readonly=true;
fTo.value=fFrom.value;

The return value from app.response is the entered text. You'd use it like this where your field is named "foo"...
var responseText = app.response({
cQuestion: "How are you today?",
cTitle: "Your Health Status",
cDefault: "Fine",
cLabel: "Response:"
});
if (responseText != null) {
var originalValue = this.getField("foo").value;
this.getField("foo").value = originalValue + " " + responseText;
}
The text entered into the response dialog will get appended to the end of any text already in the "foo" field. I'm not sure how you want that added to your code above but hat's how it's used.

Joel,
OK...I have it working, and I thik I understand what you did. I had tried something similar, but couldn't get it to work for some reason.
Anyway...my question now is...since I am using a checkmark field as the trigger for this action, how can I build in code so that this only happens when the checkmark is clicked to "true" or "Yes"? I would also like to clear the receiving field if the checkmark is unchecked or set to "False" or "Null".
As it stands, anytime you click the checkmark field to mark is checked or unchecked, it runs the code.
Here is what I ended up with:
var cRes = app.response({cQuestion: "Enter Nearest Relative First and Last name:", cTitle: "Nearest Relative", cDefault: "", cLabel: "Response:"
});
if(cRes != null){
var fFrom = this.getField("MOB Address").value;
this.getField("Relative").value = cRes + "\r" + fFrom;
}
I tried integrating my original code with this, but...couldn't get it to work.
Again...thanks for your help!

Switching HTML menu value before submit?

So I have a menu with a list of every country and its abbreviation. I want to send the full name (the text of the menu option) instead of the value. So I tried to make a function, switchval(), to do this but it did not switch the values. Any ideas?
function switchval(){
var countries = document.getElementById('countries');
countries = countries.options[countries.selectedIndex].text;
document.getElementById('countries').value = countries;
}

Set the value of the option element. I changed the variable names so they make more sense. Please consider your coding style and use good variable names, and don't use a variable twice for a different datatype (that is insane). Also, setting the value of the option element is just plain wrong, I felt dirty typing this.
function switchval(){
var selectEl = document.getElementById('countries');
var optionEl = selectEl.options[selectEl.selectedIndex];
var country = optionEl.text;
optionEl.value = country;
}

I'll second what buddhabrot showed and said - changing the value property is wrong and might not be supported in all browsers.
I would use a hidden element and set the text property into that, changing the name of the select element to something like "countries-select" and making the hidden element "countries".
That way when your form posts, it will have the proper "name" for the form processor, plus you'll have a reliable method in your code.

how to capture the mouseover element?

i am developing an autocomplete feature.but i am facing one problem there...
when i click on the suggestion box one of the results will not enter into the suggest html box...
function handleOnMouseOver(oTr)
{
deselectAll();
oTr.className ="highlightrow";
position = oTr.id.substring(2, oTr.id.length);
updateKeywordValue(position);
}
can you plz tell the solution
thanks
function updateKeywordValue(oTr)
{
var oKeyword = document.getElementById("keyword");
var strKeyword="";
var crtLink = document.getElementById("a" +oTr.id.substring(2,oTr.id.length)).toString();
crtLink = crtLink.replace("-", "_");
crtLink = crtLink.substring(0, crtLink.length);
oKeyword.value=unescape(crtLink.substring(googleurl.length, crtLink.length));
strKeyword=oKeyword.value.toString();
if (oTr.id.substring(2,oTr.id.length)==0)
{
oKeyword.value=strKeyword.substring(3,strKeyword.length);
}
selectedKeyword=oKeyword.value;
}

you should get rid of the second parameter in the substring() method. Since you just want the remainder of the string, I'm guessing, that is the default if you don't set a second value.
position = oTr.id.substring(2);
My guess is that you are getting the value of the keyword from the id, and pushing that into the input box, right? If that's the case, we'll need to see more of your code. Specifically, I'd like to see the updateKeywordValue function and I'd also like to know if the text that they are hovering over is the text you are trying to send the input box. If so, you could probably simplify the whole thing and go with something like:
function handleOnMouseOver(oTr)
{
deselectAll();
oTr.className ="highlightrow";
keywordbox.value = oTr.innerHTML;
}
But this is based on the assumption that the only data inside the hovered row is the text, and no other html. And I had to make up a name for your input box.
But if this way off, this is because we need more information to see the real problem.