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

JavaScript
1

Tell us what’s happening:

Describe your issue in detail here.
for some reason this test doesent work?
When the #number element contains the number -1 and the #convert-btn element is clicked, the #output element should contain the text Please enter a number greater than or equal to 1

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">
    <title>Roman Numerical Convertor</title>
</head>
<body>
  <input id="number">
  <button id="convert-btn">Convert</button>
  <div id="output"> 
  </div>
  <script src = 'script.js'></script>
</body>
</html>

/* file: styles.css */


/* file: script.js */
const convertBtn = document.getElementById('convert-btn');
const numInput = document.getElementById('number').value.trim();
const outputDiv = document.getElementById('output');
convertBtn.addEventListener('click',()=>{
  if(numInput === ''){
    outputDiv.textContent = 'Please enter a valid number';
  }else if(parseInt(numInput) === -1){
    outputDiv.textContent = 'Please enter a number greater than or equal to 1';
  } 
  else{
    outputDiv.textContent = ''
  }
})

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.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.

3

Save just the element at the top and then get the element value inside the click handler function.

4

To expand on lasjorg’s answer:
You are saving the value of the input element as soon as the script loads. As such, it will always be empty. Instead you need to reference the input element at the beginning, and only check it’s value in the event listener, to make sure that it’s always getting the current value when you press the button.

5

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