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!

Answer 1

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>

Answer 2

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?

Text blinking when trying to change color / font

Question

2 answers

solution1
0 ACCPTED 2014-01-22 03:20:19

solution2
0 2014-01-22 03:20:41

Text blinking when trying to change color / font

Question

2 answers

solution1 0 ACCPTED 2014-01-22 03:20:19

solution2 0 2014-01-22 03:20:41

solution1
0 ACCPTED 2014-01-22 03:20:19

solution2
0 2014-01-22 03:20:41