简体   繁体   English

作为参数传递给 Function Javascript

[英]Passing as argument to Function Javascript

I have the below HTML form and Javascript is used to validate the HTML form, so there is a hidden P element just below the text field to show if any errors in the field above it, there is a keyup event set on the (fn textfield) that triggers and hides the P (ID = fnp) element based on the input in the name (ID = fn) field this code works fine but I want it to be dynamic such that i dont have to write the same code again and again for each text field, I want to call the norml function and pass arguments into the norml function (an element name) so that it can do the same for each text field, but this method is not working : ANYBODY WOULD LIKE TO GUIDE ME WHAT I'M DOING WRONG HERE.我有下面的 HTML 表单,Javascript 用于验证 HTML 表单,因此在文本字段下方有一个隐藏的 P 元素,以显示其上方的字段中是否有任何错误,(fn 文本字段) 上设置了一个 keyup 事件) 根据名称 (ID = fn) 字段中的输入触发和隐藏 P (ID = fnp) 元素此代码工作正常,但我希望它是动态的,这样我就不必一次又一次地编写相同的代码对于每个文本字段,我想调用 norml 函数并将参数传递给 norml 函数(元素名称),以便它可以对每个文本字段执行相同的操作,但此方法不起作用:任何人都想指导我什么我在这里做错了。

This is what I want to do which doesnt work:这是我想做但不起作用的事情:

document.getElementById("fn").onkeyup = norml(pass an element name);

function norml(value received)
document.getelementbyID(received element ID name).color = red;

EXAMPLE:例子:

function norml(dx, dxx)  // receives a value as argument that is an element ID
{
    dx.style.borderColor = '#d6d6d6';
    dx.style.color = '#000000';
    dxx.style.innerHTML = '';
    dxx.style.visibility = 'hidden';    
}

THIS IS WHAT IS WORKING BUT WILL HAVE TO BE DONE FOR EACH TEXT FIELD INDIVIDUALLY这是有效的,但必须为每个文本字段单独完成

function norml()
{
    document.getElementById("fn").style.borderColor = '#FF0000';
    document.getElementById("fn").style.color = '#FF0000';
    document.getElementById("fnp").style.borderColor = '#FF0000';
    document.getElementById("fnp").style.innerHTML = '';
    document.getElementById("fnp").style.visibility = 'hidden'; 
}

function validate() {
    var errmsg = "";
    var result = true;

    var fname = document.getElementById("fn").value;
    if (!fname.match(/^[a-zA-Z]+$/))
        {
            document.getElementById("fn").style.borderColor = '#FF0000';
            document.getElementById("fn").style.color = '#FF0000';
            document.getElementById("fnp").style.backgroundColor = 'lightpink';
            document.getElementById("fnp").style.visibility = 'visible';
            document.getElementById("fnp").innerHTML = "Please enter first name in alphabets";
            document.getElementById("fn").onkeyup = norml;
            return false;
        }
    if (errmsg != ""){   //only display message box if there is something to show
    alert(errmsg);
}
}

function init()
{
    var formData = document.getElementById("enqForm");
    formData.onsubmit = validate;
}

window.onload = init;
<!DOCTYPE html>
<html lang="en">
<head>
<script src="scripts.js"></script> 
<title></title> 
</head>
<body id="enquire">
<section id="form">
    <div>
    <form id="enqForm" method="post">
        <div class="formobj">
            <div id="enquiry"><h1></h1></div>
                <input id="fn" type="text" name="firstname" placeholder="First Name *" />
                <input id="ln" type="text" name="lastname" placeholder="Last Name *" />
                <p id="fnp" type="hidden"></p>
                <p id="lnp" type="hidden"></p>
                    <input id="sendbutton" type="submit" value="Enquire" />
        </div>
    </form>
    </div>
</section>
</body>
</html>

THANKS..谢谢..

Amongst other problems, the primary one is that you're setting the (undefined) result of calling norml(dx, dxx) in the .onkeyup property, instead of passing a function reference:除其他问题外,主要问题是您在.onkeyup属性中设置调用norml(dx, dxx)的(未定义)结果,而不是传递函数引用:

dx.onkeyup = function() {
    norml(dx, dxx);
}

The other problems include:其他问题包括:

  • repeated calls to obtain the same element over and over重复调用一遍又一遍地获取相同的元素
  • and then repeated calls to deference that element's style object然后重复调用以尊重该元素的样式对象
  • use of DOM0 .onXXX instead of DOM3 addEventListener使用 DOM0 .onXXX而不是 DOM3 addEventListener

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM