Question

我是网页设计的新手，在HTML上使用JavaScript时遇到了一些问题。你看我有这个代码：

<!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>

这是我的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";
}
}

基本上它的作用是我在输入字段上写一个颜色和一个字体，当我点击提交JS时会改变<p>的类，然后我的CSS会识别它并用新颜色重新绘制它/字体。但是它不会改变超过1秒。它眨眼并恢复正常。我知道这不是最好的方法，但是因为我第一次使用JS我正在做我能做的事情。

有谁知道为什么会这样？

提前致谢！

Answer 1

您可以在提交输入的onclick中调用您的javascript。提交名称为“提交”表单，然后重新加载页面。

您可以替换

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

通过

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

Answer 2

<强>更新

假设您需要提交表单并保留用户选择而不使用任何服务器端技术。

以下解决方案应该允许您选择颜色，提交表单并将颜色和字体设置为在提交表单之前选择的内容。

<!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>

请注意：当您单击表单提交按钮时，您将表单提交到“操作”中定义的目标或自身（如果未定义任何内容）。

如果您想更改元素的颜色并留在页面上，则不应提交表单。如果您提交表单，则需要阅读提交的数据。

如果您使用服务器端语言，请使用此语言读取值并将其再次放入页面中。如果你没有使用服务器端语言，那么我写的解决方案可能会有所帮助。

$ _ GET函数借鉴自：Getting value GET OR POST variable using JavaScript?

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

2 个答案: