Develop Reference

Making a function that creates a new variable containing an element reference every time it is called

I have a function that I want to create a new Variable every time it is called. The reason why it needs to be a variable is because I am storing an element reference with it. Arrays cannot store element references that I am aware of. This is my (Simplified for this purpose) code:
function createPara(text) {
let x = document.createElement("p");
x.textContent = text;
document.body.appendChild(x);
}
function submit() {
createPara(document.getElementById("input").value);
document.getElementById("input").value = "";
}
<input id="input" type="text" placeholder="Make new paragraph">
<input type="button" onclick="submit()" value="Submit">
This code works, except after I have made a new paragraph, I can't do anything to the old ones. Like changing the background color. For example,
x.style.backgroundColor = "red";
will only change the newest paragraph. I want to be able to individually change each of them. I think this might be achievable with a for loop, but haven't figured it out yet.

To do this, you can just create an array to save all of the elements.
Like this:
let array = [];
function createPara(text) {
let x = document.createElement("p");
x.textContent = text;
array.push(x);
document.body.appendChild(x);
}
function change(){
array[document.querySelector("#number").value -1].style.color = "red";
}
function submit() {
createPara(document.getElementById("input").value);
document.getElementById("input").value = "";
}
<input id="input" type="text" placeholder="Make new paragraph">
<input type="button" onclick="submit()" value="Submit">
<br>
<input type = "number" id = "number">
<button onclick = "change();">
Change the color to red
</button>

How to transfer multiple textbox value from one webpage to another web page in multiple textbox in html

i want to transfer the input value from these textbox to another web page textbox in html
there are two files
this is the first web page
javscript code
function to transfer file to another web page
function transferdata() {
var inputTest = document.getElementById('FROM').value;
var inputTest1 = document.getElementById('TO').value;
var inputTest2 = document.getElementById('jdate').value;
if (inputTest=="") {
window.open('report_pengambilan_singgle.html','','height=650,width=1200');
}
else {
window.open('trial25.html?name=' + inputTest,'','height=650,width=1200');
}
}
html code
this is the body of the code
<form >
<label ><H2>SOURCE</h2></label><br>
<input type="text" id="FROM" name="FROM" ><BR>
<label ><H2>DESTINATION</H2></label><BR>
<input type="text" id="TO" name="TO" ><BR>
<h2> Date of Journey<input type = "date" name = "jdate" id = "jdate"></h2>
<br>
</form>
second file this the another file which will recive the data
javscript code
// Recive data from destination.html
window.onload = function () {
var url = document.location.href,
params = url.split('?')[1].split('&'),
data = {}, tmp;
for (var i = 0, l = params.length; i < l; i++) {
tmp = params[i].split('=');
data[tmp[0]] = tmp[1];
}
document.getElementById("source1").value = data.name;
document.getElementById("date").value = data.name;
document.getElementById("dest").value = data.name;
}
html code
this is the body of the another web page code
<form>
<h3> Source <input type = "text" name = "source1" id = "source1" /> </h3>
<h3> Destination <input type = "text" name = "dest" id = "dest" /> </h3>
<h3> Booking Date <input type = "date" name = "date1" id = "date1" /> </h3>
</form>
this the input field in which i want to recive data from first web page input field

Javascript html not displaying input

Whenever I run this code on my webpage, I am unable to get the buttons to perform an event upon being clicked. Nothing happens. I am wanting to display the user input for full name, date of birth and gender into the textbox whenever the user clicks display. If the user clicks next, the current data should be saved to the correct array and when the user clicks clear the current innput in the text boxes and the data in the array should be deleted. What do I need to adjust to make this happen?
<html>
<head>
<script language = "javascript">
var full_name;
var dob;
var gender;
var nameList = new Array();
var dateList = new Array();
var genderList = new Array();
function displayMembers() {
var str = " ";
var listLength = nameList.length;
for(var i = 0; i < listLength; i++) {
document.memberForm.textArea.nameList[i];
document.memberForm.textArea.dateList[i];
document.memberForm.textArea.genderList[i];
}
}
function saveMember() {
nametemp = document.getElementByName("full_name");
nameList.push(nametemp[0].value);
datetemp = document.getElementByName("dob");
dateList.push(datetemp[0].value;
gendertemp = document.getElementByName("gender");
genderList.push(gendertemp[0].value);
}
function clearList() {
nameList= [];
dateList = [];
genderList = [];
}
</script>
<title>INTERNET TECHNOLOGIES CLUB MEMBER LIST </title>
<title>INTERNET TECHNOLOGIES CLUB MEMBER LIST </title>
</head>
<body>
<form name = "memberForm">
<h1>
INTERNET TECHNOLOGIES CLUB MEMBER LIST
</h1>
Full Name: <input type = "text" name = "full_name" value = ""/>
Date of Birth: <input type = "text" name ="dob" value = ""/>
<br>
Gender: <input type = "text" name = "gender" value = ""/>
<br>
<textarea name = "textBox" rows = "10" cols = "70">
</textarea>
<br>
<input type = "button" value = "NEXT" onclick = document.memberForm.
saveMember()"></button>
<input type = "button" value = "DISPLAY" onclick =document.memeberForm.textBox.write.Full Name Date of Birth Gender "displayMembers()">
</button>
</form>
</body>
</html>

There are probably more problems I'm not seeing but here you have an unterminated string.
Change it to
<input type="button" value="NEXT" onclick="document.memberForm.saveMember()"></button>

Store users choice data in my array temporarily

This is my form and below is a function. I need 3 functions, 1 to store data, 1 to save the data and 1 to show all stored data. How can I do all of these functions so they all correspond with each other.
NOTE: The user will be entering the data so it's the users choice data which would temporarily be saved. The user should be able to click on the buttons to function the function but how can I do the three functions properly.
<form name = "Music">
<p>Input a Song Name, Artist, Collaborations, Duration or Album</p>
<input type="text" name = "Song_Name" id= "Song_Name" size="20"> <br>
<input type="text" name = "Artist" id= "Artist" size="20"> <br>
<input type="text" name = "Collaborations" id= "Collaborations" size="20"> <br>
<input type="text" name = "Duration" id= "Duration" size="20"> <br>
<input type="text" name = "Album" id= "Album" size="20"> <br>
<input type="button" value = "Save" onclick = "Save()"> <br>
<input type="button" value = "Search" onclick = "Store()"> <br>
<input type="button" value = "Show_All" onclick = "Show_All()"> <br>
Save function:
var catalogue[];
function Save = Music.Song_Name.Artist.Collaborations.Duration.Album.Save{
var SongName = document.getElementById('Song_Name').value;
var Artist = document.getElementById('Artist').value;
var Collaborations = document.getElementById('Collaborations').value;
var Duration = document.getElementById('Duration').value;
var Album = document.getElementById('Album').value;
document.write("You have chosen "+ Song_Name + Artist + Collaborations + Duration + Album)
}

First, I would recommend storing the values in an object rather than an array. It's much easier to work with when you have multiple, related pieces of data. Here's how it would work for Store and Show:
var catalogue;
function Store() {
catalogue = {
SongName: document.getElementById('Song_Name').value;
Artist: document.getElementById('Artist').value;
Collaborations: document.getElementById('Collaborations').value;
Duration: document.getElementById('Duration').value;
Album: document.getElementById('Album').value;
}
}
function Show_All() {
document.getElementById('Song_Name').value = catalogue.SongName;
document.getElementById('Artist').value = catalogue.Artist;
document.getElementById('Collaborations').value = catalogue.Collaborations;
document.getElementById('Duration').value = catalogue.Duration;
document.getElementById('Album').value = catalogue.Album;
}
How you handle the "Save" would depend on where you want to save it to, but the general idea would be that you would pass the catalogue value either directly into wherever you're saving it, or parse the properties of the catalogue object and pass each one in to wherever you're saving them.

I need to display a message containing variables (answers from form) after form submit

I need to display the answer from the form in a story. The story must be displayed below the form only after the form is successfully submitted (not an alert), and with the form remaining on the page (not a new page). I am able to insert the form values into the story, but need help with displaying the story after form is submitted. I cannot use anything but html and javascript. I think this can be done with innerHTML.
<head><title>Questions</title>
<script type = "text/javascript" src="quiz1.js">
</script>
</head><body>
<h1>Tell Me About Yourself</h1>
<form name = "the_form" action = "" method = "post"
onSubmit = "var the_result = checkMandatory(); return the_result;">
Full Name:<input type = "text" name = "name" id = "name" /><br/>
Favourite Animal:<input type = "text" name = "animal" id = "animal"><br/>
Favourite Food:<input type = "text" name = "favFood" id = "favFood"><br/>
Favourite Destination:<input type = "text" name = "destination" id = "desitnation"><br/>
Least Favourite Food:<input type = "text" name = "leastFav" id = "leastFav"><br/>
Happiest Moment:<input type = "text" name = "moment" id = "moment"><br/>
Adjective that describes you:<input type = "text" name = "adjective" id = "adjective"><br/>
<br>
<input type="button" value="Submit" onClick = "checkMandatory(); return false;"/><br />
<br />
</form>
<div id="storyDiv"></div>
</body>
</html>
function checkMandatory()
{
// check the text field
// make a var for each question to access easier eg "favMeal"
var name = window.document.the_form.name.value;
//! means 'not'... flips around the if
if (!(name.indexOf(" ") > 0))
{
alert("You must give your full name.");
//return false stops the program
return false;
} else {
//firstName checks all character from 0 to whenever (space) occurs and strips it
var firstName = name.substring(0,name.indexOf(" "));
var name = window.document.the_form.name.value;
var animal = window.document.the_form.animal.value;
var favFood = window.document.the_form.favFood.value;
var destination = window.document.the_form.destination.value;
var leastFav = window.document.the_form.leastFav.value;
var moment = window.document.the_form.moment.value;
var adjective = window.document.the_form.adjective.value;
//alert("first name is " + firstName);
//use alert firstName to test the firstName function
document.write("The young person's name was "+firstName+". "+firstName+" loved to ride
"+animal+
" almost every day. "+firstName+"'s second happiest moment, only next to "+moment+", was in
"+destination+", where "+favFood+
" was served for breakfast, lunch and dinner. It was only when "+firstName+" was told that
"+favFood+
" is actually made from "+animal+", that it instantly became "+firstName+"'s least
favourite food, even worse than "+leastFav+
", and that made "+firstName+" feel very "+adjective+" indeed.")
//document.getElementById('storyDiv').innerHTML = document.getElementById('name').value;
//document.getElementById(‘storyDiv’).innerHTML="The boy's name was "+firstName;
//document.write(‘storyDiv’).innerHTML="The boy's name was " + firstName;
}
}

You can achieve this by posting your form using ajax.
Don't call writethetext(); in your submit button
I'll use jQuery in my solution:
$(function() {
$("form").on("submit", function(e) {
var data = JSON.stringify($("form").serializeArray());
e.preventDefault();
$.post("yourserver/path/", data, function(result) {
writethetext(result);
});
});
});
function checkMandatory() {
// check the text field
// make a var for each question to access easier eg "favMeal"
var name = window.document.the_form.name.value;
//! means 'not'... flips around the if
if (!(name.indexOf(" ") > 0)) {
alert("You must give your full name.");
//return false stops the program
return false;
} else {
//firstName checks all character from 0 to whenever (space) occurs and strips it
var firstName = name.substring(0, name.indexOf(" "));
//alert("first name is " + firstName);
//use alert firstName to test the firstName function
}
}
function writethetext() {
document.getElementById(‘storyDiv’).innerHTML =
("There once was a boy named" + name;)
var firstName = name.substring(0, name.indexOf(" "));
var name = window.document.the_form.name.value;
var animal = window.document.the_form.animal.value;
var favFood = window.document.the_form.favFood.value;
var destination = window.document.the_form.destination.value;
var leastFav = window.document.the_form.leastFav.value;
var moment = window.document.the_form.moment.value;
var adjective = window.document.the_form.adjective.value;
}
function writethetext(text) {
document.getElementById(‘storyDiv’).innerHTML = text;
}
}
<html>
<head>
<title>Questions</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="quiz1.js">
</script>
</head>
<body>
<h1>Tell Me About Yourself</h1>
<form name="the_form" action="" method="post" onSubmit="var the_result = checkMandatory(); return the_result;">
Full Name:
<input type="text" name="name" id="name" />
<br/>Favourite Animal:
<input type="text" name="animal" id="animal">
<br/>Favourite Food:
<input type="text" name="favFood" id="favFood">
<br/>Favourite Destination:
<input type="text" name="destination" id="desitnation">
<br/>Least Favourite Food:
<input type="text" name="leastFav" id="leastFav">
<br/>Happiest Moment:
<input type="text" name="moment" id="moment">
<br/>Adjective that describes you:
<input type="text" name="adjective" id="adjective">
<br/>
<br>
<input type="button" value="Submit" onClick="checkMandatory();
return false;" />
<br />
<br />
</form>
<div id="storyDiv"></div>
</body>
</html>