Text blinking when trying to change color / font

Question

I'm new on web designing and i have some problems while using JavaScript on HTML. You see i have this code:

<!DOCTYPE html>
<html>
<head>
    <script src="Cod_JS.js"> </script>
    <link href='Cod_Css.css' type=text/css rel=stylesheet>
</head>
<body>
    <div>
        <p id="un" class="uno">Esta es una prueba</p>
    </div>
    <br>
    <form>
        Color: <input type="text" name="color"> <br>
        Fuente: <input type="text" name="fuente"><br>
        <input type="submit" value="Enviar" onclick="funcion1(color,fuente)" >
    </form>
</body>
</html>

And this is my JS code:

function funcion1(x,y)
{
var a=x.value;
var b=y.value;
if (a=="Rojo" && b=="Arial" )
{
var prueba=document.getElementById("un").className="dos";
}
else if (a=="Rojo" && b=="Calibri") 
{
var prueba=document.getElementById("un").className="tres";
}
else if (a=="Verde" && b=="Arial") 
{
var prueba=document.getElementById("un").className="cuatro";
}
else if (a=="Verde" && b=="Calibri") 
{
var prueba=document.getElementById("un").className="cinco";
}
}

Basically what it does is i write on the input fields a color and a font and when i click submit JS will change the class of <p> and then my CSS will recognize it and repaint it with the new color/font. However it does not change it for more than 1 sec. It blinks and goes back to normal. I know it's not the best method to do it but since my first time using JS i'm doing what i can haha.

Does anyone know why this is happening?

Thanks in advance!

score 0 · Accepted Answer · answered Jan 22 '14 at 03:20

0

You call your javascript in the onclick of the submit input. The submit as it is named "submits" the form and then the page is reloaded.

You can replace

<input type="submit" value="Enviar" onclick="funcion1(color,fuente)" >

by

<button onclick="funcion1(color,fuente)">Enviar</button>

answered Jan 22 '14 at 03:20

Yooz

2,506
21
31

Oh i see, i didnt know that :O! Thanks . I used the button tho and it still reloaded my page =/ – Carlos Peña Jan 22 '14 at 03:25
use `input type="button"` instead. – Christophe Jan 22 '14 at 03:32

score 0 · Answer 2 · edited May 23 '17 at 10:25

Updated:

Assuming that you need to submit the form and retain the user selection without using any server-side technology.

The following solution should allow you to select the color, submit the form and set the colors and font to what was selected prior to submit the form.

<!DOCTYPE html>
<html>
<head>
    <script src="Cod_JS.js"> </script>
    <link href='Cod_Css.css' type=text/css rel=stylesheet>
</head>
<body>
  <form> 
    <div>
        <p id="un" class="uno">Esta es una prueba</p>
    </div>
    <br>
        Color: <input type="text" name="color"> <br>
        Fuente: <input type="text" name="fuente"><br>
        <input type="button" value="Enviar" onclick="funcion1(color,fuente)" >
</form>
<script>
    // get query arguments
    var $_GET = {}, args = location.search.substr(1).split(/&/);
    for (var i=0; i<args.length; ++i) {
         var tmp = args[i].split(/=/);
         if (tmp[0] != "") {
            $_GET[decodeURIComponent(tmp[0])] = decodeURIComponent(tmp.slice(1).join("").replace("+", " "));
        }
    }

    function updateColor()
    {
       var color = $_GET['color'];
       var font  = $_GET['fuente'];

       if (color == "Rojo" && font  == "Arial" )
       {
            document.getElementById("un").className="dos";
       }
       else if (color == "Rojo" && font == "Calibri") {
            document.getElementById("un").className="tres";
       }
       else if (color == "Verde" && font == "Arial")  {
            document.getElementById("un").className="cuatro";
       }
       else if (color == "Verde" && font == "Calibri") 
       {
            document.getElementById("un").className="cinco";
       }
    }

    if($_GET && $_GET['color']){
          updateColor();
    }
</script>
</body>
</html>

Please note: When you click on a form submit button, you are submitting a form to a destination defined in "action" or to itself (if nothing has been defined).

If you want to change the color of the element and stay on the page, you shouldn't submit the form. If you submit the form, you need to read the data submitted.

If you use a server-side language, use this to read the values and place them in the page again. If you're not using server-side language, then the solution I wrote might be helpful.

$_GET function borrowed from: Getting value GET OR POST variable using JavaScript?

Hi , thanks for answering. Yeah i know i have to do it with the color and font that the user specifies. That's what i use the from. — Carlos Peña, Jan 22 '14 at 03:24
So you need to submit the form and set the colors the user has choosen before submitting the form? — alphabit, Jan 22 '14 at 03:26
The user sets the color and font then when he submits the form it has to change the paragraph's (
Esta es una prueba
) color and font. — Carlos Peña, Jan 22 '14 at 03:29
When you submit a form, you are leaving the current page. If you don't define a target in the form action, it will submit to the page itself (using the default method GET). You will lose the client settings you've done. You would need to read the values posted and re-assign to the elements OR stay on page and don't submit. What you want to achieve exactly? — alphabit, Jan 22 '14 at 03:31
Just that, it's like a homework i have to start familiarizing with these languages. Another user gave me the answer i needed. Using a button instead submiting a form. Thanks btw for your time and knowledge about how a form and submit button works ^^. — Carlos Peña, Jan 22 '14 at 03:37

Text blinking when trying to change color / font

2 Answers2