Do you have a shortcut for my code?

Question

Hello,
Lost in javascript, the head on the verge of explosion, the eyes on all forums I try to understand the subtlety of this sweet language...
However I think my code is similar to my English: it's'nt fluent not clear and probably have a little questionable syntax. Could you give me your opinion, give me avenues to explore to improve my writing (in javascript, for English it's screwed!) Thanks you a lot!

- - - - - - - - - H T M L - - - - - - - - -
<p> function with<span class="chg">var</span>() {<br/>
<span class="chg">var</span> x=1;<br/>
if (true) {<br/>
<span class="chg">var</span> x=2;<br/>
console.log(x);}<br/>}
</p>
<input type="text" name="reponse" value="output : 22" id="rps"></input>
<input type="button" onclick="aveclet()" value="Avec let" id="btn"/>
</div>

- - - - - - - - - J A V A S C R I P T - - - - - - - - -
let clicbtn = 0;
function aveclet(){
let chg = document.getElementsByClassName("chg");
clicbtn+=1;

if(clicbtn==1){
for (let i=0;i<chg.length;i++){
chg[i].innerHTML="let";
}

let rps = document.getElementById("rps");
rps.value="output : 21";

let btn = document.getElementById("btn");
btn.value="avec const";}

else if (clicbtn==2){
for (let i=0;i<chg.length;i++){
chg[i].innerHTML="const";
}

let rps = document.getElementById("rps");
rps.value="output : 21";

let btn = document.getElementById("btn");
btn.value="avec var";}

else if (clicbtn==3){
for (let i=0;i<chg.length;i++){
chg[i].innerHTML="var";
}

let rps = document.getElementById("rps");
rps.value="output : 22";

let btn = document.getElementById("btn");
btn.value="avec let";}

else {clicbtn=1;
for (let i=0;i<chg.length;i++){
chg[i].innerHTML="let";
}

let rps = document.getElementById("rps");
rps.value="output : 21";

let btn = document.getElementById("btn");
btn.value="avec const";}
}

PS: It's about small dictatiel which allow me to assimilate the matter by putting it in situation. Nothing very sexy th

Answer 1

Here are a few points of improvement:
- </input> should be removed. input elements are "empty" as in they close themselves and you don't need a closing tag.
- indentation could be improved a lot in HTML and a bit in the JS.
- If your HTML was supposed to be a full page, it isn't. You're missing html, head, title, body... The snippet you pasted also misses an opening div tag at the beginning.
- Some code repetition could be reduced by moving the following lines to the top of your aveclet function:
let rps = document.getElementById("rps");
let btn = document.getElementById("btn");
Those variables don't need to be declared or initialized repeatedly.
I'm not sure if this was intentional because "let" becomes useless with my recommendation too as "var" would work just as well.
- Adding } to the end of a line with more code is a little weird. It runs and works but I've never seen other developers do that. I recommend putting the } on a line that contains no other code.
- For {, it is popular to either have it at the right end of a line or on a new line.
"else {clicbtn=1;" is a bit weird because { is in the middle there. Like the way you did }, it'll still run and work just the same but the code readability drops a bit when it isn't the way JavaScript is typically written.
- Your outputted JavaScript would look nicer with indentation. You could use a few non-breaking space( &amp;nbsp; ) entities or CSS's padding-left property to accomplish this.
- Some syntax-highlighting in your output JavaScript would also look nicer. You could format JavaScript's "function", "const", "var", "if" in bold for example. This could be done with b or strong tags or with CSS( font-weight: bold; ).

Answer 2

Thank you very much for these precious tips!

Many are respected in the initial code but I had reduced it to post it here (the complete skeleton of HTML, the <strong> tags, ...)
On the other hand, I am going to improve my indentation, my use of "{" and my duplicate declarations of variables!

Thank you