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.

I believe your question may be answered in this thread:http://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery — Pablo208, Jul 26 '13 at 11:01
@Pablo208 I've read that thread already and it doesn't answer my question — user000, Jul 26 '13 at 11:04
This will help you http://stackoverflow.com/questions/5451445/how-to-display-image-with-javascript — Bindiya Patoliya, Jul 26 '13 at 11:06
@BindiyaPatoliya Thanks but that doesn't help, I've look at all the suggestions for answers already given on stackoverflow but none of them give a clear answer as to how I can display the image — user000, Jul 26 '13 at 11:25

Max Leps · Accepted Answer · 2013-07-26T19:08:37.567

2

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>

edited Jul 26 '13 at 19:08

answered Jul 26 '13 at 11:21

Max Leps

469
3
12

Why do you wrap `equals()` in an anonymous function? Just do `firstField.onkeyup = equals;` and also use `addEventListener`. – Amberlamps Jul 26 '13 at 11:25
thank you :) can you tell me more about `addEventListener` or give me some link about it?? – Max Leps Jul 26 '13 at 11:27
@maxART Thank you this helps a lot on getting the image to display, just need to work out some stuff like not having the image display until the values are compared. – user000 Jul 26 '13 at 11:55
@maxART Thanks I appreciate the effort but it's still the same, when the page loads it shows thumbs down and when I add the equal values to each box it displays a thumbs up along with the thumbs down. I can't figure out how to remove the thumbs down from the initial loading of the page. – user000 Jul 26 '13 at 17:54
@maxART correction to the above, noticed too late to edit but your changes do in fact work, it only displays the one image now on equal values, just need to figure out how to stop the thumbs down from displaying after a value is entered in the first box but I think removing the onkeyup from the first box will do that. Thank you fro your help – user000 Jul 26 '13 at 18:03

user7282 · Answer 2 · 2013-07-26T11:17:26.587

0

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">';
}

edited Jul 26 '13 at 11:17

answered Jul 26 '13 at 11:05

user7282

5,106
9
41
72

1

simple, but effective. – Jonathan Römer Jul 26 '13 at 11:07
Why did you copy the pseudo code from OP's post? This is not working. Even if you would make this JS, it would always show "thumbdown" or nothing changes. – Teemu Jul 26 '13 at 11:09
Well the poster didnt really give us alot to work with. This answer purely how to show and image with javascripts like the poster asked right? – Jonathan Römer Jul 26 '13 at 11:10
`innerHTML` is not a function, but a property, FYI. – Rob W Jul 26 '13 at 11:13

HIRA THAKUR · Answer 3 · 2013-07-27T07:04:33.480

0

 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";
}

edited Jul 27 '13 at 07:04

answered Jul 26 '13 at 11:09

HIRA THAKUR

17,189
14
56
87

The same lack of logic here... "`if they match then ... thumbs up ... if they don't ... thumbs down`". – Teemu Jul 26 '13 at 11:10
I have tested it and it has workde..can you point out where i am going wrong?i will delete my answer if your answer is valid...are you talking about replacing div with images or images with images?? – HIRA THAKUR Jul 26 '13 at 11:11
First checking == , then >= makes this funny. Sorry for the markup, I'm on a phone now, a thunder storm just arrived here. – Teemu Jul 26 '13 at 11:39

score 0 · Answer 4 · answered Jul 26 '13 at 11:10

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';

score 0 · Answer 5 · answered Jul 26 '13 at 11:11

0

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.

answered Jul 26 '13 at 11:11

Richard

279
2
9

1

If you're new to JavaScript, you definitely _should not_ use jQuery. Not my downvote though. – Teemu Jul 26 '13 at 11:14
@Richard I tried this but it didn't work, I added the code just as you have it and placed the div where I want the image to display but nothing happens when I enter values in the input boxes – user000 Jul 26 '13 at 11:18
@user594112 You must have done some mistake, it works, look at fiddle: http://jsfiddle.net/cqHtF/ – Richard Jul 27 '13 at 14:22
@Teemu: Why not? When properly taught, it allows you to write much cleaner code than pure JS. Please explain your objection, I'm really interested in your opinion. – Richard Jul 27 '13 at 14:24
When you are learning the basics of JS and especially DOM, you will get a better understanding how all works, when using pure JS. We can see the consequences of starting with jQuery even here at SO. When a programmer knowing only jQuery gets a job, which must be done without jQuery, we answer here questions like: Why my getElementById is not working? `var a = document.getElementById('#foo');` – Teemu Jul 27 '13 at 14:31

Using Javascript how can I display an image if the value of 2 fields are equal?

5 Answers5

Linked