(beginner)Looking for some guidance in basic js

I’ve doodled a very basic html/js code.
in the UI the user selects a smiley from a selection of 3, presses a button and the code outputs a greet, currently only commenting on the time. I want it say Good/Mild/Sad but I’m not sure how, I’d love some guidance on how the js function could interact with the select value if it’s at all possible.

Code here https://pastebin.com/f54v9YXH

It looks like this:
valuetime

1 Like

Cool, good start. Just some tips…

To get the value from the select, can target and ID. For example, if your form is:

    <select form="emote" id="emote-form">

Then you can target it with:

        const emot = document.getElementById("emote-form").value;

(Note that const makes more sense here since this value will not change.)
Then you can apply it. You have:

        if (emot = Good) { document.getElementById("emote").innerHTML = "Good"; }
        if (emot = Mild) { document.getElementById("emote").innerHTML = "Mild"; }
        if (emot = Sad) { document.getElementById("emote").innerHTML = "Sad"; }

First of all, (emot = Good) should be with === since you are comparing. Also, when you compare the same variable over and over like this, a switch statement is more common. But in reality, since the emot variable already has the value you want, why not just write that?

document.getElementById("emote").innerHTML = emot;

That does it in one line.

On to the next part, there are a few ways we can make this slightly more efficient. First of all, going and finding an element in the DOM is a relatively costly act. So, I think it is better to grab it once and store it:

const $demo = document.getElementById("demo");

Now we have the reference to that element stored for future use. We only look for it once and our code gets a little cleaner too. The convention of starting an element name with a $ is a convention some people use, probably originally coming from jQuery, but it is useful but optional.

The other issue is all your if statements. Imagine if the time is “1”. Your code writes a string to the DOM for every line before that. More logical would be a chain of if/else statements like:

        if (time < 2) { $demo.innerHTML = "Night time"; }
        else if (time < 5) { $demo.innerHTML = "Late night"; }        
        else if (time < 7) { $demo.innerHTML = "Early morning"; }

You’d have to change the order, but now it’s only writing to the DOM once. And also, your last case doesn’t need an if. You could also accomplish the same thing with cascading cases in a switch, but I don’t know if either is better. There are also some other ways, but it can get crazy.

So, the efficiency things are nitpicky, and don’t really matter in an app like this, but it is good to at least be aware of these kinds of things.

But a good start. Keep up the good work.

2 Likes

Wonderful explanation Kevin tyvm. It works now, I’m still very new in this and I’ll get back to this syntax when I can understand it better.

1 Like

Yeah, we all have to start somewhere. Just keep at it.

2 Likes