Develop Reference

Anyone knows what I could do to this javascript code to make it more reliable?

I don't really know all that much about javascript at all yet, I just recently started learning it bc I needed it for a microcontroller project where we needed to use an MCU with network capabilities so apart from making the mcu code I was tasked with creating the web pages it would provide to the user.
In one instance I made a section where the user would be able to see all (actually most, at least the ones I thought of importance to them) the parameters for the Led matrix that they get to set up. The problem is that, in order to load the parameters I used a method that I believe isn't really efficient, and the fact that I still don't know much about js doesn't help it. Does any of this seem to have a much easier solution to you?
<div class="row">
<div id="column1" class="column">
</div>
<div class="column middle">
<h3 style="color: rgb(187, 187, 187);">Parámetros guardados: </h3>
<div class="guardado">
<p >Mensaje guardado inicial: <span id="mensaje"></span></p>
<p >Brillo guardado: <span id="brightness"></span></p>
<p >Velocidad guardada: <span id="speed"></span></p>
<p >Alineación: <span id="text_align"></span></p>
<p >Modo operando: <span id="MODO"></span></p>
<p >Tiempo entre mensajes (M2): <span id="TIME"></span></p>
<p >Efecto (M1): <span id="EM1"></span></p>
<p >Efecto inicio (M2): <span id="E1M2"></span></p>
<p >Efecto salida (M2): <span id="E2M2"></span></p>
</div>
</div>
<script>
//Load parameters
var xhttp = new XMLHttpRequest(); //Message
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("mensaje").innerHTML = this.responseText;
}
};
xhttp.open("GET", "/mensaje", true);
xhttp.send();
var xhttp = new XMLHttpRequest(); //Brightness
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("brightness").innerHTML = this.responseText;
}
};
xhttp.open("GET", "/brillo_guardado.txt", true);
xhttp.send();
var xhttp = new XMLHttpRequest(); //Speed
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("speed").innerHTML = this.responseText;
document.getElementById("speed").innerHTML += "%";
}
};
xhttp.open("GET", "/velocidad_guardado.txt", true);
xhttp.send();
var xhttp = new XMLHttpRequest(); //MODE
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("MODO").innerHTML = this.responseText;
}
};
xhttp.open("GET", "/modo_guardado.txt", true);
xhttp.send();
var xhttp = new XMLHttpRequest(); //Text alignment
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("text_align").innerHTML = this.responseText;
}
};
xhttp.open("GET", "/alineacion_guardado.txt", true);
xhttp.send();
var xhttp = new XMLHttpRequest(); //var initial_time
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("TIME").innerHTML = this.response;
document.getElementById("TIME").innerHTML += "ms";
}
};
xhttp.open("GET", "/tiempo_guardado.txt");
xhttp.send();
var xhttp = new XMLHttpRequest(); //EFFECT MODE 1
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("EM1").innerHTML = this.response;
}
};
xhttp.open("GET", "/effecto_modo1_guardado.txt");
xhttp.send();
var xhttp = new XMLHttpRequest(); //EFFECT 1 MODE 2
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("E1M2").innerHTML = this.response;
}
};
xhttp.open("GET", "/effecto1_m2_guardado.txt");
xhttp.send();
var xhttp = new XMLHttpRequest(); //EFFECT 2 MODE 2
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("E2M2").innerHTML = this.response;
}
};
xhttp.open("GET", "/effecto2_m2_guardado.txt");
xhttp.send();
</script>
This is what it looks like after loading
The page is going to be asking the mcu for several parameters it has stored and then it'll display them.

The code can be cleaned up a lot:
function loadText(elementId, url, suffix = ""){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(elementId).innerHTML = this.responseText + suffix;
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
//Load parameters
loadText("mensaje", "/mensaje");
loadText("brightness", "/brillo_guardado.txt");
loadText("speed", "/velocidad_guardado.txt", "%");
loadText("MODO", "/modo_guardado.txt");
loadText("text_align", "/alineacion_guardado.txt");
loadText("TIME", "/tiempo_guardado.txt", "ms");
loadText("EM1", "/effecto_modo1_guardado.txt");
loadText("E1M2", "/effecto1_m2_guardado.txt");
loadText("E2M2", "/effecto2_m2_guardado.txt");
When you're repeating code like that, put it into a function.
Other than that, there's not much you can do to make it faster, as you're loading every individual string from a separate url.
Instead of the old-fashioned XMLHttpRequest, you can also make use of the fetch API:
function loadText(elementId, url, suffix = ""){
fetch(url).then((response) => {
document.getElementById(elementId).innerHTML = response + suffix;
});
}

Show item before loading AJAX reply

I am trying to show an item if the user clicks on my button which is connect with my AJAX response. The div should by show after clicking button and hidden after the whole page is loading.
My AJAX:
document.getElementById('mainContent').style.display = 'none';
document.getElementById('productDetail').style.display = 'block';
//ajax
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("response").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "product/" + id + "/", true);
xhttp.send();
I try this:
(I added a show div if the code is loaded and I wanted to hide it after loading)
document.getElementById('divForShow').style.display = 'block';
document.getElementById('mainContent').style.display = 'none';
document.getElementById('productDetail').style.display = 'block';
//ajax
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("response").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "product/" + id + "/", true);
xhttp.send();
document.getElementById('divForShow').style.display = 'none';
I also tried
(The concealment code I wanted to associate with the onload event in the last div from the ajax response)
document.getElementById('divForShow').style.display = 'block';
document.getElementById('mainContent').style.display = 'none';
document.getElementById('productDetail').style.display = 'block';
//ajax
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("response").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "product/" + id + "/", true);
xhttp.send();
*and added onload function on the end of my div in html AJAX response
</div id="myLastDivFromAjaxRespone" onload="hiddenDiv()">
document.getElementById('divForShow').style.display="none"; //hiddenDiv function
How to show the div after clicking the button and hide if the entire AJAX response has been loaded.

You can simply split the code in 2 functions.
Then, on button click, calls the before_ajax(), then
Example:
function before_ajax(){
document.getElementById(".element").innerHTML = "<b>Loading...</b>";
}
function do_ajax(){
document.getElementById('mainContent').style.display = 'none';
document.getElementById('productDetail').style.display = 'block';
//ajax
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("response").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "product/" + id + "/", true);
xhttp.send();
}
function reload_page(){
window.location.reload();
}

How to use Promise JS in this case?

I have :
function loadDoc123() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET","demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();
}
I want to implement promiseJS to this code but dont editing code . How do i do?

Without editing you can't. You need to wrap the code into the Promise
function loadDoc123() {
return new Promise((res, rej) => {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
res(this.responseText);
}
};
xhttp.open("GET","demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();
});
}
And use
loadDoc123().then(text => document.getElementById("demo").innerHTML = text);

JavaScript: Variables not working outside function?

Why cannot I call variables that I have defined inside a function? This is my code...
var username;
var rank;
var steamid;
var avatar;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
if (this.responseText == "null") {
} else {
var infoArr = JSON.parse(this.responseText);
var username = infoArr.username;
var rank = infoArr.rank;
var steamid = infoArr.steamid;
var avatar = infoArr.avatar;
testIt();
}
}
};
xhr.open("GET", "../getInfo.php", true);
xhr.send();
function testIt() {
alert(username);
}
Function testIt() is returning: undefined
What my code does is to get info from a JSON encoded page and make variables.

If you want to use the variables outside of the function, they need to be defined outside of the function.
var username, rank, steamid, avatar, infoArr, username, rank, steamid, avatar;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
if (this.responseText == "null") {
} else {
infoArr = JSON.parse(this.responseText);
username = infoArr.username;
rank = infoArr.rank;
steamid = infoArr.steamid;
avatar = infoArr.avatar;
testIt();
}
}
};
xhr.open("GET", "../getInfo.php", true);
xhr.send();
function testIt() {
alert(username);
}

Javascript XML object - Undefined

The following code brings back my id.
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "https://brewslocal.com/brewery-images-xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
document.getElementById("photoBox").innerHTML = xmlDoc.getElementsByTagName("image")[0].id;
}
<div id="photoBox"></div>
When I change to the next attribute imageurl it comes back undefined.
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "https://brewslocal.com/brewery-images-xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
document.getElementById("photoBox").innerHTML = xmlDoc.getElementsByTagName("image")[0].imageurl;
}
<div id="photoBox"></div>
Any ideas?

You can use Element.getAttribute('attributeName') to get the attribute value from this custom HTML element.
function myFunction(xml) {
var xmlDoc = xml.responseXML;
document.getElementById("photoBox").innerHTML = xmlDoc.getElementsByTagName("image")[0].getAttribute('imageurl');
}

You can do like this
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x = xmlDoc.getElementsByTagName('title')[0];
var y = x.childNodes[0];
document.getElementById("demo").innerHTML =
y.nodeValue;
}