Tell us what’s happening:
I can not seem to make steps 4 (click convert with no value) and 5 (typing a negative number) to work. I’ve tried the code outside of fCC and it works fine, but in the certification page the button doesn’t even work. Can anyone help me?
Here is the exact same code working on files tested on the browser:
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">
<title>Roman Numeral Converter</title>
</head>
<body>
<h1 id="Title">Roman Numeral Converter</h1>
<div id="box">
<p>Enter a number:</p>
<input id="number" type="number"/>
<button id="convert-btn" type="button">Convert</button>
<div id="output"></div>
</div>
<script scr="script.js"></script>
</body>
</html>
/* file: styles.css */
* {
text-align: center;
}
html {
background-color: lightgray;
font-family: Helvetica, sans-serif;
}
#box {
height: 100px;
width: 300px;
background-color: black;
color: lightgrey;
margin: auto;
padding: 10px;
border-radius: 20px;
}
#number {
border-radius: 5px;
}
#convert-btn {
border-radius: 5px;
border: transparent;
}
/* file: script.js */
const input = document.getElementById("number");
const convertButton = document.getElementById("convert-btn");
const output = document.getElementById("output");
convertButton.addEventListener("click", () => {
if(input.value === ""){
output.innerText = "Please enter a valid number"
} else if (input.value < 1) {
output.innerText = "Please enter a number greater than or equal to 1"
}
})
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36
Challenge Information:
Build a Roman Numeral Converter Project - Build a Roman Numeral Converter