尝试更改颜色/字体时文本闪烁

Question

I'm new on web designing and i have some problems while using JavaScript on HTML. 我是网页设计的新手，在HTML上使用JavaScript时遇到一些问题。 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: 这是我的JS代码：

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. 基本上，它的工作是在输入字段上输入颜色和字体，然后单击“提交”，JS将更改<p>的类，然后CSS将识别出它并用新的颜色/字体重新绘制。 However it does not change it for more than 1 sec. 但是，更改时间不会超过1秒。 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. 我知道这不是最好的方法，但是自从我第一次使用JS以来，我正在尽我所能。

Does anyone know why this is happening? 有人知道为什么会这样吗？

Thanks in advance! 提前致谢！

Answer 1

You call your javascript in the onclick of the submit input. 您可以在提交输入的onclick中调用javascript。 The submit as it is named "submits" the form and then the page is reloaded. 提交名称为“ submits”表单，然后重新加载页面。

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? $ _GET函数的借用：使用JavaScript获取值GET或POST变量？

尝试更改颜色/字体时文本闪烁

问题描述

2 个解决方案

解决方案1
0 已采纳 2014-01-22 03:20:19

解决方案2
0 2014-01-22 03:20:41

尝试更改颜色/字体时文本闪烁

问题描述

2 个解决方案

解决方案1 0 已采纳 2014-01-22 03:20:19

解决方案2 0 2014-01-22 03:20:41

解决方案1
0 已采纳 2014-01-22 03:20:19

解决方案2
0 2014-01-22 03:20:41