Roman Converter hide and show problem

Hello everyone,
Can anyone help me to solve not showing the warning section if the number is correctly entered. Once I had the warning, it is not hidden again. vice versa. Code pen link is : https://codepen.io/Mehmet-Altemur-Altan/pen/JjVxdvy
Thank you for your contribution.

To do what you need to do, you can add the class hide to your wrongOutput element on each click of the convertButton.
( add it at the very beginning of your event listener’s function even before the if condition )

convertButton.addEventListener('click', (e) => {
    // here you should hide that element
    if (!invalidInput()){
    e.preventDefault();
    convertToRoman(userInput.value)
    output.classList.remove('hide')
    userInput.value = ""
    }
})

That way, on each click that element is going to disappear and will only show up again on error by the invalidInput function.


This is the answer for what you asked for. But, if you entered for example a number higher than 3999 you will see that the error message shows up but also the conversion happens.

That is because in your if condition you are using what the invalidInput returns and it’s undefined which is a falsy value cause you didn’t specify anything else using return, so the condition in if will always be true because of !.

if (!invalidInput())

Lastly… if this is your project for the JS Roman Converter Project, you will not pass because you need to follow what the tests need you to do.

( one of them is: your error message should appear in your exact #output element not a different element like you did )

 <div id="wrong-input-output" class="hide">

Thank you Mostafa for your support. I’ve got it. please check my codes again. I passed the test after your post.

1 Like

Great Job!

You built your project almost identical to freeCodeCamp’s project here:
Roman Numberal Converter - FCC

Keep up the fantastic pace!