Change the HTML background when input is true

Asked

Viewed 62 times

0

I’m making a website where you’ll have as background a photo of Heisenberg saying "Say My Name" with a text input in the middle of the screen and when the user type Heisenberg the background will change to a photo of him saying You Goddam right, but I’m not getting it, how do I do this using Jquery?

$("#SayMyName").focusout( function(){
    var SayMyName = $("#SayMyName").val();
    if (SayMyName == "Heisenberg") {
        $("body").css("background-image", "url(/myimage.jpg)");
    }
    else {
        SayMyName = " "
    }
});
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>Document</title>
</head>
<body>
    <form action="">
        <input type="text" id="SayMyName" name="SayMyName">
        <input type="submit" value="submit">
    </form>
</body>
</html>

javascript html jquery

  • Does it have to be with Jquery? CSS is not enough?

  • no, because I need to check if the user has typed the name correctly

  • I know this, I asked if the change in the back has to be done with jquery? The check can be done with vanilla javascript?

  • 1

    I prefer Jquery because that’s what I’m studying at the moment

  • the error occurs initially because url() is a function that expects to receive a string with the path and it is receiving something that is not a string, the right would be to use simple quotes there "url('/myimage.jpg')" this initially, then you have to check if the path is correct.

1 answer

2


Probably the path to the image url is wrong if the current directory does not need the / no /myimage.jpg or you can use it too ./myimage.jpg, Also, the apostrophes are missing within the url. Other than that, Else is doing nothing... since it only assigns a blank space to a variable that is no longer used within its scope.

Then I put your code, only by changing the background-color, in order to show that the logic itself is correct, possibly needing to check only the path of the background-image.

Then I put your code, using any image...

$("#SayMyName").focusout( function(){
    var SayMyName = $("#SayMyName").val();
    if (SayMyName == "Heisenberg") {
        $("body").css("background-image", "url('https://cdn.pixabay.com/photo/2014/05/02/21/49/laptop-336373_960_720.jpg')");
    }
});
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>Document</title>
</head>
<body>
    <form action="">
        <input type="text" id="SayMyName" name="SayMyName">
    </form>
</body>
</html>

  • it’s not wrong, it’s all right, but it’s still not working

  • You changed the image url?

  • I edited it to work with an image...

  • @Felipeavelar if the person type Heisenberg hit enter the reload form. Swap <form action=""> for <form action="javascript:void(0);">

  • @Vitorcorrea, the image only appears when the person clicks outside the <input> the event chosen is focusout.

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.