Using Javascript how can I display an image if the value of 2 fields are equal?
Question
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.
5 answers
solution1
2 ACCPTED 2013-07-26 11:21:55
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>
solution2
0 2013-07-26 11:05:17
Create an empty div with id img1 and use this code
if( document.getElementById("scan_out").value == document.getElementById("scan_in").value)
{
document.getElementById("img1").innerHTML='<img src="path/to/image.png">';
}
else if( document.getElementById("scan_out").value >= document.getElementById("scan_in").value){
document.getElementById("img1").innerHTML='<img src="path/to/image2.png">';
}
solution3
0 2013-07-26 11:09:38
if(document.getElementById("scan_out").value == document.getElementById("scan_in").value){
document.getElementById("img_id").src= "images/xyz/someimage.png";
}
else if(document.getElementById("scan_out").value == document.getElementById("scan_in").value){
document.getElementById("img_id1").src= "images/xyz/someimage.png";
}
solution4
0 2013-07-26 11:10:03
Here is an example how can you match numbers.
var n1 = parseInt(document.getElementById('text1').value, 10);
var n2 = parseInt(document.getElementById('text2').value, 10);
var l = document.querySelector('label');
if (n1 == n2)
l.innerHTML = 'Number1 = Number2';
else
l.innerHTML = 'Number1 != Number2';
solution5
0 2013-07-26 11:11:14
If you are new to JavaScript, you shall definitely use jQuery.
Then the code would be:
if ( $("#scan_out").val() === $("#scan_in").val() ) {
$("#scan_icon").html('<img src="thumbs_up.png">');
} else {
$("#scan_icon").html('<img src="thumbs_down.png">');
}
You should place <div id="scan_icon"></div> where you want the icon to appear.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.