How do i get my JavaScript function to return images

Question

I need the function below to return images, it is for a password check and the image should appear as a cross or a tick when its correct or wrong. this is the code so far

<script type="text/javascript">
function checkPasswordMatch() {
    var password = $("#txtNewPassword").val();
    var confirmPassword = $("#txtConfirmPassword").val();

    if (password != confirmPassword)
        $("#divCheckPasswordMatch").html("Passwords do not match!" & <img src="img/cross.png" alt="some_text">);
    else
        $("#divCheckPasswordMatch").html("Passwords match." & <img src="img/tick.png" alt="some_text">);
    }

I have tried doing it a couple of ways above si the main way i tried than i also tried to comment the whole image statement but nothing seems to work I'm usually getting syntax errors. i am new to programming as well if this explains why i haven't already figured it out.

$("#divCheckPasswordMatch").html('Passwords do not match! <img src="img/cross.png" alt="some_text">'); — Eraden
– Eraden, Commented Feb 5, 2014 at 10:29

Dropout · Accepted Answer · 2014-02-05 10:41:34Z

2

The correct syntax is:

$("#divCheckPasswordMatch").html("Passwords do not match! <img src='img/cross.png' alt='some_text'/>");

look out for quote mixing - don't break single quotes with double ones and vice versa
IMG is an unary tag - it should end with a />
.html() method requires a String input - if you join multiple parts use the + operator, not &, so it looks like "abc" + "def"

If you don't want to use two different types of quotes you can escape the inner quotes like this:

$("#divCheckPasswordMatch").html("Passwords do not match! <img src=\"img/cross.png\" alt=\"some_text\">");

Correct your other HTML setting in a similar manner.

edited Feb 5, 2014 at 10:41

answered Feb 5, 2014 at 10:33

Dropout

14k10 gold badges59 silver badges112 bronze badges

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

1 Comment

Cerbrus Over a year ago

+1, although you might also want to mention something about escaping quotes.

Quentin · Accepted Answer · 2014-02-05 10:28:09Z

1

You need to put the HTML in the string, not just floating about the script on its own after a random Bitwise AND.

"Passwords do not match! <img src=\"img/cross.png\" alt=\"some_text\">"

answered Feb 5, 2014 at 10:28

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

1 Comment

Cerbrus Over a year ago

You might want to mention something about escaping quotes, or use single quotes, seeing as the OP is new to programming.

ARIF MAHMUD RANA · Accepted Answer · 2014-02-05 10:45:00Z

1

Your syntax isn't correct use either concat operator or as you are not using any js variable you can go with single quote thus you don't need to escape. Use this

<script type="text/javascript">
function checkPasswordMatch() {
    var password = $("#txtNewPassword").val();
    var confirmPassword = $("#txtConfirmPassword").val();

    if (password != confirmPassword)
        $("#divCheckPasswordMatch").html('Passwords do not match!<img src="img/cross.png" alt="some_text">');
    else
        $("#divCheckPasswordMatch").html('Passwords match.<img src="img/tick.png" alt="some_text">');
    }

edited Feb 5, 2014 at 10:45

answered Feb 5, 2014 at 10:29

ARIF MAHMUD RANA

5,1963 gold badges39 silver badges58 bronze badges

1 Comment

Dropout Over a year ago

Please provide an explanation for your code. Answers like "use this" decrease the quality of services that SO provides.

Collectives™ on Stack Overflow

How do i get my JavaScript function to return images

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related