Solution 1 :

you are setting innerHTML for everything. try setting it within the conditional

const cost = document.querySelector('.amount').value;
const service = document.querySelector('.service').value;
const people = document.querySelector('.numOfPeo').value;

if (cost === "") {
    document.querySelector('#alert-1').innerHTML = "Please tell me amount of your bill!"
} else if (service === 0) {
    document.querySelector('#alert-2').innerHTML = "Please tell me how your service was!"
} else if (people === "" || people <= 1) {
    document.querySelector('#alert-3').innerHTML = "Please tell me how many people are sharing!"
}

const tip = cost * service / 100;
const total = tip / people;

document.getElementById('totalTip').style.display = "block";
document.getElementById('tip').innerHTML = total;

When you code const alert1 = document.querySelector('#alert-1').innerHTML = "Please tell me amount of your bill!" what you are actually doing is setting alert1 to "Please tell me amount of your bill!" and the innerHTML attribute also to "Please tell me amount of your bill!". In other words, your alert constants are unnecessary as your only goal is to set the innerHTML for certain cases. These cases are represented by your if logic. So it makes sense to move these innerHTML statements to your conditional logic and remove your const variables entirely. Additionally, in order to make sure only one alert fires at a time I added if else logic. And since the return value of our event listener function does not matter, there is no reason to return anything

Problem :

So, I am trying to beef up my tip calculator app in JS a bit. I decided to add an alert underneath each form if there is no value added and unfortunately it’s partially not working.
I’ve got 3 forms (amount of a bill, choosing what kind of tip the user wants to give in percentage and how many people are sharing bill. Problem is, JS launches all three alerts despite missing only one or two values. Also, I wonder how can I get rid of alerts as those remain even after adding all values to the calculator.
It worked before adding alert1, alert2 and alert3.

const calculateTip =() => {
    const cost = document.querySelector('.amount').value;
    const service = document.querySelector('.service').value;
    const people = document.querySelector('.numOfPeo').value;
    const alert1 = document.querySelector('#alert-1').innerHTML = "Please tell me amount of your bill!"
    const alert2 = document.querySelector('#alert-2').innerHTML = "Please tell me how your service was!"
    const alert3 = document.querySelector('#alert-3').innerHTML = "Please tell me how many people are sharing!"

    if (cost === "") {
        alert1
    }

    if (service === 0) {
        return alert2
    }

    if (people === "" || people <= 1) {
        return alert3
    }

    const tip = cost * service / 100;
    const total = tip / people;

    document.getElementById('totalTip').style.display = "block";
    document.getElementById('tip').innerHTML = total;
}

btn.addEventListener('click', calculateTip);

Comments

Comment posted by Kunal Mukherjee

use

Comment posted by Waleed Nasir

use if / else and switch case and can you please also add html tag, will batter to understand 🙂

Comment posted by tomgru23

Thanks for your help. Although I am still experiencing difficulties with a code. When I do not enter any value only first message does fire up. Message under second form does not fire up at all. Alerts remain even though I enter value to all forms. Any thoughts how can I get rid of them whilst all values are entered?

Comment posted by Pat Murray

It would help to understand the html you are working with but from what I know, this is what I can say: if you want each alert to be populated no matter what then DO NOT use

Comment posted by Pat Murray

Overall man, I would not suggest setting innerHTML for form control warnings. You should create the elements in html and set them to

Comment posted by codepen.io/tgruszczynski91/pen/NWGWvaG

I have tried to do it, but I am absolutely clueless at this point. If you help with me with refining it I would be grateful.

Comment posted by Pat Murray

first things first, you have no elements with

By

Leave a Reply

Your email address will not be published. Required fields are marked *