Build a Roman Numeral Converter Project - Build a Roman Numeral Converter

JavaScript
1

Tell us what’s happening:

Describe your issue in detail here.
Is there a reason why question 4 is not showing complete for me? The div innerHTML is changing to the correct text if the input field is empty:
" When you click on the #convert-btn element without entering a value into the #number element, the #output element should contain the text Please enter a valid number ." ### Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/styles.css">
    <script src="./script.js"></script>
    <title>Document</title>
</head>
<body>
    <input id="number">
    <button id="convert-btn"></button>
    <div id="output"></div>    
</body>
</html>

/* file: styles.css */


/* file: script.js */
const convertButton = document.getElementById('convert-btn');
const numberInput = document.getElementById('number');
const outputDiv = document.getElementById('output');


console.log(numberInput)

convertButton.addEventListener('click', () => {
    if(numberInput.value === ""){
        outputDiv.innerHTML = "Please enter a valid number"
    }
})

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Challenge Information:

Build a Roman Numeral Converter Project - Build a Roman Numeral Converter

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

1 Like
3

Move the script element down to after the page content. Place it just before the closing body tag.

1 Like
4

Thank you I forgot to update my index.html on here after doing so in vs code

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.