Develop Reference

read from an input search multiple inputs and print them dynamically

Hello everyone I can't do an exercise in html and javascript. How can I read from an input search multiple inputs and print them dynamically? for example if I write as input in the search bar "mark" I want to print "mark". If I then write "helen" in the search bar, I want to print: "mark", "helen", if I then write "gessy", I want to print "mark", "helen", "gessy" and so on.
page.html
<div class="container-fluid" >
<form class="d-flex" role="search">
<input class="form-control me-2" id="form-control me-2" type="search" placeholder="Search" aria-label="Search"> //here I write the inputs
<button class="btn btn-outline-success" type="button" onclick="send_tocontainer()">Search</button> //when i click the button i see all input value write from users
</form></div>
<div id="container-dx" >
<p id="text"></p>
</div>
script.js
function send_tocontainer(){
let element=document.getElementById("form-control me-2").value;
let newnode= document.createElement("p");
const textnode= newnode.createTextNode(element)
newnode.appendChild(textnode);
document.getElementById("testo").innerHTML=element
}

You could use an array to save the entries coming from your input. Then display them on the page by looping over that array and creating a tag to hold each entry and append it to your pages <p> element.
The benefit of saving the data to an array/object means you could also reference that data later.
See the snippit for an example.
const btn = document.querySelector('.btn')
const search = document.querySelector('form .me-2')
const textEl = document.getElementById('text')
const searchValues = []
const searchResults = (e) => {
// push the values into an array
searchValues.push(search.value)
// iterate over the array
searchValues.forEach((val, i) => {
// create a span tag to hold the display text from the array
let span = document.createElement('span')
// style the span so it is block element
span.style.display = 'block'
// is this the last iteration through, which would be the last entry into the form by user
// yes, then set the last value in the array to the textContent of our newly created span tag
i === searchValues.length - 1 ? span.textContent = searchValues[searchValues.length-1] : null
// append the text element
textEl.appendChild(span)
})
}
// event listener for button
btn.addEventListener('click', searchResults)
<div class="container-fluid">
<form class="d-flex" role="search">
<input class="form-control me-2" id="form-control me-2" type="search" placeholder="Search" aria-label="Search"> //here I write the inputs
<button class="btn btn-outline-success" type="button">Search</button> //when i click the button i see all input value write from users
</form>
</div>
<div id="container-dx">
<p id="text"></p>
</div>
Or you could just display the entries directly on the page without saving the input to some kind of array/object/etc...
See the snippit for an example.
const btn = document.querySelector('.btn')
const search = document.querySelector('form .me-2')
const textEl = document.getElementById('text')
const searchResults = (e) => {
let span = document.createElement('span')
span.style.display = 'block'
span.textContent = search.value
textEl.appendChild(span)
}
btn.addEventListener('click', searchResults)
<div class="container-fluid">
<form class="d-flex" role="search">
<input class="form-control me-2" id="form-control me-2" type="search" placeholder="Search" aria-label="Search"> //here I write the inputs
<button class="btn btn-outline-success" type="button">Search</button> //when i click the button i see all input value write from users
</form>
</div>
<div id="container-dx">
<p id="text"></p>
</div>

There are multiple ways you can complete this exercise. I've decided to use the local storage. It's important save the previous search state as it is required to be used on the next function call.
Rather than using element variable I'm using oldElement and newElement hoping they may self explain.
send_tocontainer = () => {
let newElement = document.getElementById("form-control me-2").value;
if (!localStorage.getItem('data')) {
localStorage.setItem('data', '[]');
}
let oldElement = JSON.parse(localStorage.getItem('data'));
oldElement.push(newElement);
localStorage.setItem('data', JSON.stringify(oldElement));
let serchContent = document.createElement("p");
serchContent.innerText = oldElement.toString();
document.body.appendChild(serchContent);
// let newnode = document.createElement("p");
// const textnode = newnode.createTextNode(element);
// newnode.appendChild(textnode);
// document.getElementById("testo").innerHTML = element
}
notice I have commented out the createTextNode as the function aren't defined in the question.
Here in local storage an array is created as data and new values are stored in to it. I also took liberty of creating a paragraph element to display your search results.
I've hosted this code here try to play around with it
https://stackblitz.com/edit/js-eamamp?file=index.html,index.js

Program is treating the same string differently when entered into a different text box

I have a program that is supposed to group links together. Like minecraft saved toolbars, you can save a collection of links, then enter in the name of a group and it will open all of them.
But my program is having trouble with getting the list from localStorage when the name is entered into the text box meant to get the link. But when I just use the value of the text box meant to name the group, it works fine.
My code is here:
var groupName = document.getElementById('name');
var link = document.getElementById('newLink');
var linkCounter = 0
var getByName = document.getElementById('getByName').value
function startGroup() {
localStorage.setItem(groupName.value, groupName.value);
console.log(localStorage.getItem(groupName.value))
}
function addLink() {
linkCounter++;
localStorage.setItem(groupName.value + '_link' + linkCounter, link.value);
console.log(localStorage.getItem(groupName.value + '_link' + linkCounter))
}
function saveGroup() {
localStorage.setItem(groupName.value + '_length', linkCounter);
console.log(localStorage.getItem(groupName.value + '_length'))
alert(groupName.value);
}
function getGroup() {
// if I replace getByName with groupName.value, it works fine.
var len = localStorage.getItem(getByName + '_length')
console.log(len)
for (var x = 1; x <= len; x++) {
window.open(localStorage.getItem(getByName + '_link' + x));
}
}
<!DOCTYPE html>
<html>
<a href='readit.html'>READ THIS BEFORE USING</a>
<p>WHEN ADDING A LINK YOU NEED TO PASTE IT OR ADD HTTPS:// TO THE BEGINNING OF THE LINK.</p>
<div id='toolbars'>
<p>Open a group!</p>
</div>
<div id='create'>
<p>Create some bookmark groups!</p>
<input type='text' placeholder='name your group' id='name'>
<button onclick='startGroup()'>Let's add some links!</button>
<br>
<input type='text' placeholder='add a link' id='newLink'>
<button onclick='addLink()'>Submit</button>
<br>
<button onclick='saveGroup()'>SAVE</button>
</div>
<div id='preview'>
<br><br>
<button onclick='getGroup()'>Open this group</button>
<input type="text" id="getByName">
</div>
</html>
<script src="script.js"></script>

You are reading the value of the getByName input element at page load. Instead you should read the value at the time of need. So define getByName as the DOM element (not as its value):
var getByName = document.getElementById('getByName');
And where you currently reference getByName, suffix the .value property accessor. For instance:
var len = localStorage.getItem(getByName.value + '_length');
Side note: I find it easier to use a memory data structure for all your data, and when something is added to it, to write that complete data structure to one single local storage key, JSON formatted. You may want to look into that.

Javascript: Assigning User Input as a Variable

I'm just learning HTML, CSS, and Javascript and having a tough time grasping the JS. I've been working on this simple issue now for literally 6 hours. I've checked plenty of posts on SO, W3, re-read relevant chapters in Jon Duckett's book, and tried every combination I could think of in the code.
What I need to do is take a username from an input field and run it through a function to change it in some way. I've seen other's posts with similar questions but haven't been able to create a solution yet. The issue that keeps happening is that when I place what should be the user input back to the page it uses the actual words name.toUpperCase() rather than the value I've given the variable name. I tried converting the name to uppercase in its own statement and then assigning that a variable, but that didn't work either. It seems like my js is never giving "name" a value to begin with.
JS:
var name = document.getElementById('nameEntry');
var compliment = document.getElementById('compliment');
var input = document.getElementById('submitjs');
input.onclick = transformName;
function transformName () {
var elcompliment = document.getElementById('compliment');
elcompliment.textContent = 'name.toUpperCase( )' + ' YOU ROCK!';
};
HTML:
<div class="jsform">
<h2> Enter your name and see it change!</h2>
<input type="text" name="nameEntry" id="nameEntry" />
<input type="submit" name="submitjs" value="submit" id="submitjs"/>
<div>
<p id="compliment">Great Job!</p>
</div>
</div>

Since you are retrieving input value using element's id, there is no need for form.
function transformName () {
var name = document.getElementById('nameEntry').value;
var compliment = document.getElementById('compliment');
compliment.innerHTML = name.toUpperCase( ) + ' YOU ROCK!';
};
<div class="jsform">
<h2> Enter your name and see it change!</h2>
<input type="text" name="nameEntry" id="nameEntry" />
<input type="button" onclick="transformName()" value="Transform me"/>
<div>
<p id="compliment">Great Job!</p>
</div>
</div>

The name variable currently refers to DOM element. The value property returns the data entered in the input element.
The value property sets or returns the value of the value attribute of a text field.
var name = document.getElementById('nameEntry').value;
var compliment = document.getElementById('compliment');
var input = document.getElementById('submitjs');
input.onclick = transformName;
function transformName () {
var name = document.getElementById('nameEntry').value;
var elcompliment = document.getElementById('compliment');
elcompliment.innerHTML = name.toUpperCase()+' YOU ROCK!';
};
<div class="jsform">
<h2> Enter your name and see it change!</h2>
<input type="text" name="nameEntry" id="nameEntry" />
<input type="submit" name="submitjs" value="submit" id="submitjs" />
<div>
<p id="compliment">Great Job!</p>
</div>
</div>

DOM not updating until page is refreshed

I have an asynchronous method that calls a web api to retrieve json data.
I then use the json data to fill in a few `' boxes. However, the values do not appear in the text boxes until I refresh the page?
The HTML:
<form>
<h1 id="OrderNameHeader"></h1>
<div class="dataitemdiv">
<p class="dataitemlabel">Quantity:</p>
<input id="quantitytb" type="text" readonly="readonly" class="dataitemtextbox" />
</div>
<div class="dataitemdiv">
<p class="dataitemlabel">Delivery Date:</p>
<input id="deldatetb" type="text" readonly="readonly" class="dataitemtextbox" />
</div>
</form>
The Javascript:
function SearchOrder() {
var OrderName = document.getElementById("SearchTextBox").value;
var frurl = 'order/getbyname/' + OrderName;
var api = new GetJSON(frurl);
var obj;
obj = api.CallAPI().done(function (data) {
//alert('Quantity: '+data.Quantity +' & Delivery Date: ' + data.DeliveryDate);
var onh = document.getElementById("OrderNameHeader");
onh.title = data.OrderName;
document.getElementById("quantitytb").value = data.Quantity;
document.getElementById("deldatetb").value = data.DeliveryDate;
});
}
Its worth noting at this point that the line: alert('Quantity: '+data.Quantity +' & Delivery Date: ' + data.DeliveryDate); works perfectly fine?
Do I have to do some manual refresh of the page in the Javascript or is there something else I am missing
Update:
Just to add some extra information, I've done some more debugging and I can see that neither the data.~ or the element i'm trying to modify is undefined, they both have values.
Tested this on all major browsers (minus safari).

multiple div with same template

I have a 'users page'. I would like to give a textbox for entering the no. of users. On click of submit 'n' no of user forms need to be presented to user.
User1
first name -
last name -
User2
first name -
last name -
.
.
.
UserN
first name -
last name -
I don't know the value of 'N' upfront. So it won't be a good idea to write multiple 'divs' in my html.
Requirement:Rather I want to have a user template div. And copy the template 'n' times depending on the value of 'n' in the textbox. But I would also want all the 'divs' to have different ids like 'user1', 'user2' etc.
I cannot figure out a way to do this apart from populating my html with too many 'divs'. Would need help achiving the Requirement specified.
Looking for a template like:-
<div id="user-template" class="hidden">
<label class="lbl"><b>Handle:</b></label><input type="text" id="first_name" value=""/>
</div>
And wanted to have id="user-template" change for all new divs.

You can try something like this:
You can make a template and append it to the DOM for the number entered in the input field.
$(document).ready(function() {
$("#createForms").click(function() {
var numOfForms = $("#numOfForms").val();
var template = $('#hidden-template').html();
for (var i = 0; i < numOfForms; i++) {
$('#targetDiv').append("<p>User" + (i + 1) + ":</p>");
$('#targetDiv').append(template);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="numOfForms"></input>
<input type="button" id="createForms" value="Get Fields"></input>
<div id="targetDiv"></div>
<script id="hidden-template" type="text/x-custom-template">
<div id="user-template" class="hidden">
<p>First Name:
<input type="text" name="firstName"></input>
</p>
<p>Last Name:
<input type="text" name="lastName"></input>
</p>
<br>
</div>
</script>

A simple way is to write a function that takes the n value and returns the actual dom that you can append to some parent element on your page. A simple example below:
function createNDivs(n) {
if(!n) return;
var fragment =document.createDocumentFragment();
for(var i=0;i<n;i++) {
var div = document.createElement('div');
fragment.appendChild(div);
}
return fragment;
}