onSearch event (html and Java)

Asked

Viewed 23 times

0

I am trying to use the onSearch event by calling a function of my Js file where, when searching for a specific term (TJ RJ), it will display an image, only that the image is not displayed after giving the enter. PS: The image is in the root folder, next to the html file.

Follow the Cód:

HTML:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="utf-8">
    <title>DETRAN</title>

    <style>
        body {
            background: #1d1f21b0;
            font: normal, 15pt, arial;
            text-align: center;
        }

        header {
            color: white;
            text-align: center;
        }

        section {
            background: white;
            border-radius: 10px;
            padding: 15px;
            width: 500px;
            height: 300px;
            margin: auto;
            box-shadow: 5px 5px 10px #424141b0;

        }

        footer {
            color: white;
            text-align: center;
            font-style: italic;
        }
    </style>
    <script type="text/javascript" src="js/ex007.js"></script>
</head>

<body >
    <!-- MÓDULO C -  AULA 13 [exercícios] -->
    <header>
        <h1>Conteúdo Programático</h1>
    </header>

    <section>
        <div>
            <strong>Informe o Concurso:</strong><br>
            <input id="orgao" type="search" onsearch="carregar()">

        </div>
        <br><br>
        <div>
            <img id="imagem" src="" alt="Concurso">
        </div>
    </section>
    <footer>
        <p>&copy; RTR</p>
    </footer>

</body>
</html>

Js:

function carregar(){
    var conc = document.getElementById('orgao')
    var img  = document.getElementById('imagem')

    if(conc == "TJ RJ"){
        img.src = 'tjrj.png'
    }
}
javascript

  • This onsearch event is not supported by firefox or edge https://www.w3schools.com/jsref/event_onsearch.asp.

2 answers

1


What’s missing is that you didn’t get the input value, so you never got inside the IF and you thought it wasn’t working, see with a log console inside: 

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="utf-8">
    <title>DETRAN</title>

    <style>
        body {
            background: #1d1f21b0;
            font: normal, 15pt, arial;
            text-align: center;
        }

        header {
            color: white;
            text-align: center;
        }

        section {
            background: white;
            border-radius: 10px;
            padding: 15px;
            width: 500px;
            height: 300px;
            margin: auto;
            box-shadow: 5px 5px 10px #424141b0;

        }

        footer {
            color: white;
            text-align: center;
            font-style: italic;
        }
    </style>
    <script type="text/javascript">
    function carregar(){
    var conc = document.getElementById('orgao').value
    var img  = document.getElementById('imagem')

    console.log('foi')

    if(conc == "TJ RJ"){
        img.src = 'tjrj.png'
    }
}
    </script>
</head>

<body >
    <!-- MÓDULO C -  AULA 13 [exercícios] -->
    <header>
        <h1>Conteúdo Programático</h1>
    </header>

    <section>
        <div>
            <strong>Informe o Concurso:</strong><br>
            <input id="orgao" type="search" onsearch="carregar()">

        </div>
        <br><br>
        <div>
            <img id="imagem" src="" alt="Concurso">
        </div>
    </section>
    <footer>
        <p>&copy; RTR</p>
    </footer>

</body>
</html>

0

You must pass the input value

function carregar(){

    var conc = document.getElementById('orgao').value;
    var img  = document.getElementById('imagem')

    alert('conc: '+conc);

    if(conc == "TJ RJ"){
        img.src = 'tjrj.png'
    }
}

Browser other questions tagged javascript

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