Question

我有两个表单位于不同的页面上，并且在单击提交按钮时可以运行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 =“”'属性的元素，但我仍然知道为什么这个代码不起作用。这让我疯了。

通过解决方法，它可以完美地运行完全相同的代码。

仅供参考，以下是使用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本身的基础。如果有人能向我解释，我会非常感激！

Answer 1

以下是一个示例，介绍如何使用html DOM为.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对象确实存在，否则您将收到错误。

JavaScript：两个相同的功能，一个不起作用

1 个答案: