JavaScript:两个相同的函数，一个不起作用

JavaScript: Two identical functions, one will not work

本文关键字：函数 不起作用 一个 两个 JavaScript      更新时间：2023-09-26

我有两个表单，它们位于不同的页面上，并且在单击提交按钮时要运行JavaScript函数。这是JavaScript：

var confirmConsentShot = document.getElementById('confirmConsentShot');
var confirmConsentMist = document.getElementById('confirmConsentMist');
confirmConsentShot.onclick = function() {
    'use strict';
    var editForm = document.getElementById("editForm");
    var newP = document.createElement('p');
    confirmConsentShot.setAttribute('disabled', 'disabled');
    newP.innerHTML = '<img src="Image/loading.gif" width="40" height="40"><br /><span style="color: #00AA00">You are being redirected to electronically sign the Vaccination consent form.</span><br />';
    document.getElementById('loading').appendChild(newP);
    window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
    editForm.setAttribute('action', '?p=submitShot');
    editForm.submit();
};
confirmConsentMist.onclick = function() {
    'use strict';
    var editFormMist = document.getElementById("editFormMist");
    var newPMist = document.createElement('p');
    confirmConsentMist.setAttribute('disabled', 'disabled');
    newPMist.innerHTML = '<img src="Image/loading.gif" width="40" height="40"><br /><span style="color: #00AA00">You are being redirected to electronically sign the Vaccination consent form.</span><br />';
    document.getElementById('loadingMist').appendChild(newPMist);
    window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
    editFormMist.setAttribute('action', '?p=submitMist');
    editFormMist.submit();
};

第一个功能非常好。我复制了它，并将其设置为在另一个页面上使用（两个页面都加载了包含此代码的JS文件）。

在它不起作用后，我尝试更改一些变量和ID标记的名称，但这不应该是必要的，因为每个页面都是单独加载的，所以没有两个具有相同ID的元素，并且函数中的变量只具有该函数的本地作用域。此外，原始函数（顶部函数）继续完美地工作。第二个函数仍然无法工作，它似乎根本没有被调用，没有控制台错误。

我已经为第二个函数找到了一个变通方法，将其更改为一个独立的命名函数，并将其添加到具有"onclick=""属性的元素中，但我仍然必须知道为什么这段代码不起作用。它把我逼疯了。

有了这个解决方法，它可以非常好地运行EXACT SAME代码。

仅供参考，以下是使用onclick属性正常工作的变通方法：

function onMist() {
    'use strict';
    var editFormMist = document.getElementById("editFormMist");
    var newPMist = document.createElement('p');
    confirmConsentMist.setAttribute('disabled', 'disabled');
    newPMist.innerHTML = '<img src="Image/loading.gif" width="40" height="40"><br /><span style="color: #00AA00">You are being redirected to electronically sign the Vaccination consent form.</span><br />';
    document.getElementById('loadingMist').appendChild(newPMist);
    window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
    editFormMist.setAttribute('action', '?p=submitMist');
    editFormMist.submit();
}

我只能认为JavaScript本身一定有一些我不理解的基本内容。如果有人能向我解释，我将不胜感激！

下面是一个关于如何使用htmlDOM将.onclick事件分配给具有id=confirmConsentShot的元素的示例。

document.getElementById("confirmConsentShot").onclick = function(){myFunction()};
function myFunction() {
    'use strict';
    var editForm = document.getElementById("editForm");
    var newP = document.createElement('p');
    confirmConsentShot.setAttribute('disabled', 'disabled');
    newP.innerHTML = '<img src="Image/loading.gif" width="40" height="40"><br /><span style="color: #00AA00">You are being redirected to electronically sign the Vaccination consent form.</span><br />';
    document.getElementById('loading').appendChild(newP);
    window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
    editForm.setAttribute('action', '?p=submitShot');
    editForm.submit();
}

您还可以使用addEventListener附加click事件，如下所示：

document.getElementById("confirmConsentShot").addEventListener("click", myFunction);

现在创建您的函数：

function myFunction() {
    //your function
}

如上所述，请确保您的html对象确实存在，否则会出现错误。

相关文章：