Question

我有一个带有“提交”按钮的表单，该表单在单击时会调用“提交单击”功能。如果用户在输入中未输入任何内容，则单击提交时将变为无，否则在用户输入所有信息时返回功能的语句将不起作用。

var r = document.getElementById("input1");
var r2 = document.getElementById("input2");
var r3 = document.getElementById("input3");
var r4 = document.getElementById("input4");

if (r.value === "" || r2 === "" || r3 === "" || r4 === "" ) {
    document.getElementById("sbmt").onclick="";
} else {
    document.getElementById("sbmt").onclick="submitClick()";
}

Answer 1

问题是您将onclick设置为字符串，应将其设置为函数

document.getElementById("sbmt").onclick = submitClick;

我还有两个建议给你

对具有id=r1,r2...的所有输入使用相同的类。并使用querySelectorAll()
使用some()代替检查每个和值。

您的代码将如下所示。

var inputs = [...document.querySelectorAll('.input')]
if (inputs.some(x => x.value === '')) {
    document.getElementById("sbmt").onclick="";
}
else{
    document.getElementById("sbmt").onclick=submitClick;
}

Answer 2

首先，通过javascript分配点击侦听器时，请为实际函数分配函数名称而不是字符串。字符串版本是HTML内容。

此外，我建议不要动态更改功能。使功能包括单击是否可以发生的验证逻辑。这样做的好处是您不必每次更改r1，r2，r3或r4时都重新运行点击侦听器分配。

像这样：

var r = document.getElementById("input1");
var r2 = document.getElementById("input2");
var r3 = document.getElementById("input3");
var r4 = document.getElementById("input4");

document.getElementById("sbmt").onclick = handleSubmitClick;

function canSubmitClick() {
    return !(r.value === "" || r2 === "" || r3 === "" || r4 === "")
}

function handleSubmitClick(e) {
    if( !canSubmitClick() ) {
        return;
    }

    submitClick(e);
}

Answer 3

首先，您似乎忘记了检查r2，r3和r4的值。

然后，您尝试将onclick事件分配给期望功能的字符串。

只需：

document.getElementById("sbmt").onclick = submitClick;

Answer 4

请尝试使用此代码，我希望它会起作用：

var r = document.getElementById("input1");
var r2 = document.getElementById("input2");
var r3 = document.getElementById("input3");
var r4 = document.getElementById("input4");

if (r.value === "" || r2 === "" || r3 === "" || r4 === "" ) {
    document.getElementById("sbmt").onclick="";
} else {
    document.getElementById("sbmt").onclick = function() {submitClick()};
}

有关更多信息，请查看有关w3schools的onclick教程https://www.w3schools.com/jsref/event_onclick.asp

如何返回JavaScript更改的onClick值？

4 个答案: