In case you don’t know, a hue inverter takes a value between 0 and 360, adds 180 if the input is less than or equal to 180, and subtracts 180 if the input is greater than 180. I added some JavaScript to do that operation, but it isn’t working.
Here is the UI (there is no CSS yet): Click to see the image.
function invertHue() {
const inputHue = Number(document.getElementById("hue-i").value);
const outputHue = document.getElementById("hue-o").textContent;
var result;
try {
if (inputHue <= 180 && inputHue > 0) {
result = inputHue + 180;
outputHue = result;
} else if (inputHue > 180 && inputHue <= 360) {
result = inputHue - 180;
outputHue = result;
} else {
window.alert("The hue must be between 0 and 360.");
}
} catch (error) {
window.alert("There was an issue.");
}
}<div class="input">
<input type="text" id="hue-i" placeholder="Enter hue here...">
<button id="invert-btn" onclick="invertHue()">Invert</button>
</div>
<div class="output">
<p id="hue-o">Inverted hue will appear here...</p>
</div>What is going wrong in the code?
(p.s. I am using VS Code for my editor.)
9
don’t use const for input values, use it for the element itself
const
inputHueElm = document.querySelector('#hue-i')
, outputHueElm = document.querySelector('#hue-o')
;
function invertHue()
{
outputHueElm.textContent = ''
;
let val = Number(inputHueElm.value)
;
if ( isNaN(inputHueElm.value) )
{
window.alert('There was an issue... (not a number)')
}
else if (!Number.isInteger(val) || val < 0 || val > 360)
{
window.alert('The hue must be an integer between 0 and 360.')
}
else
{
outputHueElm.textContent = (val + 180) % 360;
}
}<div class="input">
<input type="text" id="hue-i" placeholder="Enter hue here...">
<button id="invert-btn" onclick="invertHue()">Invert</button>
</div>
<div class="output">
<p id="hue-o">Inverted hue will appear here...</p>
</div>