Menu
I have a form that I want to be able to compare the numbers entered in two input boxes and if they match then I want to display a thumbs up image if they don't I want to display a thumbs down image. I'm attempting to use javascript to do this but I'm not sure how to get the images to display. I've searched this topic but am unable to find anything that explains how to display an image using javascript in the manner I need to do it. Here is what I have for my code so far, and I'm not even sure if what I have is even correct,
if document.getElementById("scan_out").value == document.getElementById("scan_in").value
//do something here to display thumbs_up.png
else document.getElementById("scan_out").value >= document.getElementById("scan_in").value
//do something here to display thumbs_down.png
This is my first attempt at javascript so I'm not sure if I'm on the right track or not?
so this is what I have now as given from answers below
<html>
<head>
</head>
<body>
<form>
<input type="text" name="name" id="firstField"/>
<img src="images/thumbs_up.png" style="display: none;" id="image1"/>
<img src="images/thumbs_down.png" style="display:block;" id=image2"/>
<input type="text" name="name" id="secField" onchange="equals()"/>
</form>
</body>
<script type="text/javascript">
var firstField = document.getElementById('firstField');
var secField = document.getElementById('secField');
var image = document.getElementById('image2');
var image = document.getElementById('image1');
function equals() {
if(firstField.value == secField.value) {
image.style.display = 'block';
}
else {
image.style.display = 'none';
}
}
firstField.onkeyup = function() { equals() }
secField.onkeyup = function() { equals() }
</script>
but this always displays a thumbs down image then adds the thumbs up image if the inputs match showing both the thumbs up and thumbs down. I don't want there to be an image unless the values match or don't match but only after a value is input.
845
clean and easy way with js is following...
after edit
<html>
<head>
</head>
<body>
<form>
<input type="text" name="name" id="firstField"/>
<img src="images/thumbs_up.png" style="display: none; background: #000;" id="image"/>
<img src="images/thumbs_down.png" style="display: none; background: #ff0000;" id="image2"/>
<input type="text" name="name" id="secField" onchange="equals()"/>
</form>
</body>
<script type="text/javascript">
var firstField = document.getElementById('firstField');
var secField = document.getElementById('secField');
var image = document.getElementById('image');
var image2 = document.getElementById('image2');
function equals() {
if(firstField.value == secField.value) {
image.style.display = 'block';
image2.style.display = 'none';
}
else {
image.style.display = 'none';
image2.style.display = 'block';
}
}
firstField.onkeyup = equals;
secField.onkeyup = equals;
</script>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
