Change page background as user chooses color

Asked

Viewed 110 times

0

The main goal is that when the user enters the color in the form field, the color is changed.

However, when the user inserts the color, it is displayed as background and then back to the original color (start). The error is when it automatically goes back to color start, but I can’t fix.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Muda cores</title>
    <style>
        body{
            background: tomato;
            color: white;
            font-size: 1.2em;
            font-family: helvetica, sans-serif;
        }
        .content{
            max-width: 960px;
            margin: 50px auto;
            display: flex;
            flex-wrap: wrap;
        }

        div input{
            flex: 1;
            font-size: 1em;
            padding: 5px;
        }

        div button{
            flex: 1;
        }

    </style>
</head>
<body id="meufundo">  

    <h1>INSIRA A COR DE FUNDO QUE VOCÊ DESEJA</h1>

    <form action=""> 
        <input type="text" id="bgcolor">
        <!-- Ao clicar puxa a função trocarcor() -->
        <input type="submit" value="TROCAR" onclick="trocarcor()"> 
    </form>

    <p id="cor_escolhida"></p>

    <script>
        function trocarcor() {
            //Seleciona o elemento do seletor de cores, pega o seu valor e registra em uma variável.
            let Cor =  document.querySelector('#bgcolor').value;
             //Seleciona o elemento ID em que a cor deve ser trocada, entra no estilho e altera o background para cor inserida e adquirada, através do value anterior.
            document.getElementById('meufundo').style.backgroundColor = Cor;
            //Mostra na tela qual foi a cor escolhida
            document.getElementById('cor_escolhida').innerHTML = `A cor escolhida foi ${Cor}`;
        }
    </script>

</body>
javascript html css

2 answers

1

Your problem is that your input is type submit, and should be type button

<input type="submit" value="TROCAR" onclick="trocarcor()">

Should be 

<input type="button" value="TROCAR" onclick="trocarcor()">

Behold

            function trocarcor() {
                //Seleciona o elemento do seletor de cores, pega o seu valor e registra em uma variável.
                let Cor =  document.querySelector('#bgcolor').value;
                 //Seleciona o elemento ID em que a cor deve ser trocada, entra no estilho e altera o background para cor inserida e adquirada, através do value anterior.
                document.getElementById('meufundo').style.backgroundColor = Cor;
                //Mostra na tela qual foi a cor escolhida
                document.getElementById('cor_escolhida').innerHTML = `A cor escolhida foi ${Cor}`;
            }
            body{
                background: tomato;
                color: white;
                font-size: 1.2em;
                font-family: helvetica, sans-serif;
            }
            .content{
                max-width: 960px;
                margin: 50px auto;
                display: flex;
                flex-wrap: wrap;
            }

            div input{
                flex: 1;
                font-size: 1em;
                padding: 5px;
            }

            div button{
                flex: 1;
            }
    <body id="meufundo">  

        <h1>INSIRA A COR DE FUNDO QUE VOCÊ DESEJA</h1>

        <form action=""> 
            <input type="text" id="bgcolor">
            <!-- Ao clicar puxa a função trocarcor() -->
            <input type="button" value="TROCAR" onclick="trocarcor()"> 
        </form>

        <p id="cor_escolhida"></p>

0

I added a Return false; after the onclick of the input

function trocarcor() {
            //Seleciona o elemento do seletor de cores, pega o seu valor e registra em uma variável.
            let Cor =  document.querySelector('#bgcolor').value;
             //Seleciona o elemento ID em que a cor deve ser trocada, entra no estilho e altera o background para cor inserida e adquirada, através do value anterior.
            document.getElementById('meufundo').style.backgroundColor = Cor;
            //Mostra na tela qual foi a cor escolhida
            document.getElementById('cor_escolhida').innerHTML = `A cor escolhida foi ${Cor}`;
        }
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Muda cores</title>
    <style>
        body{
            background: tomato;
            color: white;
            font-size: 1.2em;
            font-family: helvetica, sans-serif;
        }
        .content{
            max-width: 960px;
            margin: 50px auto;
            display: flex;
            flex-wrap: wrap;
        }

        div input{
            flex: 1;
            font-size: 1em;
            padding: 5px;
        }

        div button{
            flex: 1;
        }

    </style>
</head>
<body id="meufundo">  
    <h1>INSIRA A COR DE FUNDO QUE VOCÊ DESEJA</h1>
    <form action=""> 
        <input type="text" id="bgcolor">
        <!-- Ao clicar puxa a função trocarcor() -->
        <input type="submit" value="TROCAR" onclick="trocarcor();return false;"> 
    </form>
    <p id="cor_escolhida"></p>
</body>

Browser other questions tagged javascript html css

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