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:stackoverflow.com/questions/554273/… — Pablo208
– Pablo208, Commented Jul 26, 2013 at 11:01
@Pablo208 I've read that thread already and it doesn't answer my question — user000
– user000, Commented Jul 26, 2013 at 11:04
@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
– user000, Commented Jul 26, 2013 at 11:25

Max Leps · Accepted Answer · 2013-07-26 19:08:37Z

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, 2013 at 19:08

answered Jul 26, 2013 at 11:21

Max Leps

4813 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Amberlamps Over a year ago

Why do you wrap equals() in an anonymous function? Just do firstField.onkeyup = equals; and also use addEventListener.

Max Leps Over a year ago

thank you :) can you tell me more about addEventListener or give me some link about it??

user000 Over a year ago

@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 Over a year ago

@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 Over a year ago

@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

mikach · Accepted Answer · 2013-07-26 11:10:03Z

0

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

answered Jul 26, 2013 at 11:10

mikach

2,4272 gold badges16 silver badges15 bronze badges

Comments

Richard · Accepted Answer · 2013-07-26 11:11:14Z

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, 2013 at 11:11

Richard

2792 silver badges9 bronze badges

5 Comments

Teemu Over a year ago

If you're new to JavaScript, you definitely should not use jQuery. Not my downvote though.

user000 Over a year ago

@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

Richard Over a year ago

@user594112 You must have done some mistake, it works, look at fiddle: jsfiddle.net/cqHtF

Richard Over a year ago

@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.

Teemu Over a year ago

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

user7282 · Accepted Answer · 2013-07-26 11:17:26Z

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, 2013 at 11:17

answered Jul 26, 2013 at 11:05

user7282

5,1969 gold badges44 silver badges73 bronze badges

4 Comments

Jonathan Römer Over a year ago

simple, but effective.

Teemu Over a year ago

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.

Jonathan Römer Over a year ago

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?

Rob W Over a year ago

innerHTML is not a function, but a property, FYI.

HIRA THAKUR · Accepted Answer · 2013-07-27 07:04:33Z

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, 2013 at 7:04

answered Jul 26, 2013 at 11:09

HIRA THAKUR

17.8k14 gold badges60 silver badges87 bronze badges

3 Comments

Teemu Over a year ago

The same lack of logic here... "if they match then ... thumbs up ... if they don't ... thumbs down".

HIRA THAKUR Over a year ago

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??

Teemu Over a year ago

First checking == , then >= makes this funny. Sorry for the markup, I'm on a phone now, a thunder storm just arrived here.

Collectives™ on Stack Overflow

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

5 Answers 5

5 Comments

Comments

5 Comments

4 Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

5 Comments

4 Comments

3 Comments

Linked

Related