We Keep Coding

why my Local Storage show me "object HTMLSpanElement"?

Hello everybody I am relatively new to coding. I have a local storage project in object oriented javascript for reservation data and to display them in a reservation summary.I am currently blocked, I manage to recover the various values ​​with "getItem", but when I want to display them on my html it displays "object HTMLSpanElement".
the only solution I found is to add ".textcontent" at the end of my variables but it doesn't work.
this is my code
class information{
constructor(){
this.StationName = document.getElementById("StationName");
this.name = document.getElementById("name");
this.firstname = document.getElementById("firstname");
this.adresse = document.getElementById("adresse");
this.PlacesTotal = document.getElementById("PlacesTotal");
this.nbrVeloDispo = document.getElementById("nbrVeloDispo");
};
initstorage(){
var StationName = document.getElementById("StationName").textContent;
var name = document.getElementById("name").value;
var firstname = document.getElementById("firstname").value
var adresse = document.getElementById("adresse").textContent;
var PlacesTotal = document.getElementById("PlacesTotal").textContent;
var nbrVeloDispo = document.getElementById("nbrVeloDispo").textContent;
};
initreservation(){
var StationName = localStorage.getItem("StationName");
var name = localStorage.getItem("name");
var firstname = localStorage.getItem("firstname");
var adresse = localStorage.getItem("adresse");
var PlacesTotal = localStorage.getItem("PlacesTotal");
var nbrVeloDispo = localStorage.getItem("nbrVeloDispo");
};
reserver(){
document.getElementById("signature").style.display = "block";
document.getElementById("panneaureservation").style.display = "none";
};
};
document.getElementById("reservation1").innerHTML = StationName;
const stockage = new information();
document.getElementById("reserve").onclick = function() { stockage.initstorage(); stockage.initreservation(); stockage.reserver(); }
Thank you for taking your time to help me.

When you call localStorage.setItem() you are attempting to store a reference to the DOM element itself instead of the content of that element. Since localStorage only stores strings, the object implicitly gets its .toString() method called on it and a string representation of the object's type and element name is what gets stored.
Here's an example of what's happening (described above):
console.log(document.querySelector("div").toString());
<div>My div element</div>
Once that happens, you can't extract the reference later because all you have is the string name of the object.
You didn't show that code, but that's what needs to be updated. It should store the string value that you will want to get later. Something like this:
localStorage.setItem("StationName", document.getElementById("StationName").textContent);
localStorage.setItem("name", document.getElementById("name").value);
localStorage.setItem("firstname", document.getElementById("firstname").value);
localStorage.setItem("adresse", document.getElementById("adresse").textContent);
localStorage.setItem("PlacesTotal", document.getElementById("PlacesTotal").textContent);
localStorage.setItem("nbrVeloDispo", document.getElementById("nbrVeloDispo").textContent);
Where you set the .textContent of non-form field DOM elements and the .value of form field DOM elements. And, of course, you don't want this code to run against form field data until the form has been completed.

Add value from data layer variable at the end of hyperlink

I am trying to get a vlaue from a data layer variable and add it to the end of a hyperlink.
So if my hyperlink is https://www.somehyperlink.com and my variable is variable1 with value 23 i want the final hyperlink to be https://www.somehyperlink.com/23.
I've got this code, which is probably not the best way to do it, but I'm not sure how to replace the last part of it with the value from the variable:
(function () {
var links = document.querySelectorAll( 'a[href="https://www.somehyperlink.com/replace"]')
var searchString = "replace"
var replacementString = "value-from-variable"
links.forEach(function(link){
var original = link.getAttribute("href");
var replace = original.replace(searchString,replacementString)
link.setAttribute("href",replace)
})
})();
I would appreciate any help.
Thanks

The code works, try to apply it in a Custom HTML Tag instead Custom Javascript variable.
Step 1:
create a Data Layer Variable called i.e. 'DLV value to replace' and assign the name of the variable in the Data Layer Variable Name field.
Step 2:
apply the Data Layer Variable to your Custom HTML code.
See below:
<script>
var links = document.querySelectorAll( 'a[href="https://www.somehyperlink.com/replace"]')
var searchString = "replace"
var replacementString = {{DLV value to replace}}
links.forEach(function(link){
var original = link.getAttribute("href");
var replace = original.replace(searchString,replacementString)
link.setAttribute("href",replace)
})
</script>

Updating only some of object

I have a table in my database that I would like to be able to change some of the sections and keep the other functions as they were however it is updating the table so that the two are changed but the other 3 become empty. is there any way to change this?
$(function Tuesday(){
// CREATE A REFERENCE TO FIREBASE
var dateTuesdayRef = new Firebase('https://shiftsapp.firebaseio.com/roster');
// REGISTER DOM ELEMENTS
var date2Field = $('#date2Input');
var emp1put2Field = $('#emp1Input2');
var emp2put2Field = $('#emp2Input2');
var emp3put2Field = $('#emp3Input2');
var emp4put2Field = $('#emp4Input2');
var emp5put2Field = $('#emp5Input2');
var enter2Field = $('#enter2');
// LISTEN FOR KEYPRESS EVENT
enter2Field.keypress(function (e) {
if (e.keyCode == 13) {
//FIELD VALUES
var dateTuesday = date2Field.val();
var emp1put2 = emp1put2Field.val();
var emp2put2 = emp2put2Field.val();
var emp3put2 = emp3put2Field.val();
var emp4put2 = emp4put2Field.val();
var emp5put2 = emp5put2Field.val();
var enter2 = enter2Field.val();
//SAVE DATA TO FIREBASE AND EMPTY FIELD
var obj2 = {};
obj2[dateTuesday] = {
emp1:emp1put2,
emp2:emp2put2,
emp3:emp3put2,
emp4:emp4put2,
emp5:emp5put2
}
dateTuesdayRef.child(dateTuesday).set({emp1:emp1put2,
emp2:emp2put2,
emp3:emp3put2,
emp4:emp4put2,
emp5:emp5put2});
enter2Field.val('');
}
});
});

Get the values for the things you want to stay the same from your server, and feed them back when you set the object. You could also use a custom function to autofill undefined values like I have suggested.

From the table at the top of the Firebase guide on saving data:
set( ): Write or replace data to a defined path, like messages/users/
update( ): Update some of the keys for a defined path without replacing all of the data
So if you call update() instead of replace, it will only change the values of the properties you pass in and leave other values unmodified.

Changing the selected object in Javascript

What I am trying to do is rewrite content on the page depending on which object I have selected. I have some objects like so:
function floorPlan(name,rev,sqft,bedrm,bthrm) {
this.name = name;
this.rev = rev;
this.sqft = sqft;
this.bedrm = bedrm;
this.bthrm = bthrm;
}
// 1BR Plans
var a1 = new floorPlan('A1',false,557,1,1);
var a2 = new floorPlan('A2',false,652,1,1);
var a3 = new floorPlan('A3',false,654,1,1);
var a4 = new floorPlan('A4',false,705,1,1);
var a5 = new floorPlan('A5',false,788,1,1);
// The Selected plan
var currentPlan = floorPlan.a1;
I am having the user control this via a .click() function in a menu:
$('.sideNav li').click(function() {
// Define the currentPlan
var current = $(this).attr('id');
var currentPlan = floorPlan.current;
});
The problem is that currentPlan keeps coming back as undefined and I have no idea why. Should I be defining currentPlan differently? I can't seem to find any resources to help me find the answer.
UPDATED:
I switched out a few parts per your suggestions:
// The Selected plan
var currentPlan = a1;
and....
// Define the currentPlan
var current = $(this).attr('id');
currentPlan = current;
However, everything is still returning undefined in the click function (not initially though).

First of all $('this') should be $(this)
Secondly you're trying to use a read ID from your LI as a variable name. That doesn't work. If you store your plans in an array you can use the ID to search in that array:
var plans=Array();
plans["a1"]=new floorPlan('A1',false,557,1,1);
plans["a2"]=new floorPlan('A2',false,652,1,1);
Then your jQuery code should be altered to this:
$('.sideNav li').click(function() {
// Define the currentPlan
var current = $(this).attr('id');
var currentPlan = plans[current];
alert(currentPlan);
});
I created a JSFiddle for this. Is this what you were looking for?

Use as floorPlan.currentPlan = a1;
instead of var currentPlan = floorPlan.a1;
Please create a plunker and will correct if any issue.

I spot two errors.
When you write var inside a function, that variable is only accessible with that function. Right now you are creating a new variable in your anonymous function that is "hiding" the global variable with the same name.
So, first remove the var keyword from the assignment in the anonymous function (the one you call on "click").
Secondly I think you mean to assign floorPlan[current].
The final line should read:
currentPlan = floorPlan[current];

Javascript: how to create an instance by class name and an arguments array, like C#?

In C# to create an new instance by name and arguments, we can use reflection as follows:
var instance = Activator.CreateInstance("Com.Account.Person",
new object[] { "Jack", 195, 'USA' });
How to do this in Javascript?
var clazzName = document.getElementById('clazzName'); // from an input in the page
var args = document.getElementById('args').split(','); // from another input in the page
var instance = ....... // how?

If you have a factory method of the form:
function MyFactoryMethod() {
// Perform instantiation here
return new MyObject();
}
Then you can invoke it, knowing only its name as a string, by doing:
var name = "MyFactoryMethod"
var myObj = window[name]();
That said, I don't endorse this pattern, and I have an inkling that this will get you into tricky situations down the road.

You can't. JavaScript does not have classes. It has only objects.

If you have for ex.
<input id="element" name="elementname" type="text" value="elementvalue" />
and want to get "elementname", "text" and "elementvalue"? You can use this:
var element = document.getElementById('element');
var name = element.name;
var type = element.type;
var value = element.value;