【发布时间】：2022-01-14 18:02:46
【问题描述】：
说明： 在我们的网站上，我们有一个按钮可以引导第三方调查。为了遵守 GDPR，我们希望用户 1. 在他们能够点击按钮之前通过我们的 cookie 同意系统接受 cookie。因此，默认情况下禁用按钮。有一个提示文本说您需要先接受 cookie，并且仅当尚未接受 cookie 时才会显示此文本。 接受 cookie 后，该文本提示被隐藏，并出现一个复选框（复选框被隐藏，仅在接受 cookie 时显示）。用户最后需要选中该框才能启用按钮。
到目前为止，页面上只有一个按钮就可以正常工作。但是，我们现在希望在单个页面上拥有多个此类按钮，每个按钮都带有一个复选框和提示文本，不幸的是，这种实现似乎只适用于页面上的第一个按钮，而不适用于其他按钮。我的意思是：第一个按钮及其复选框和提示文本按预期工作，但其他提示文本不会显示/隐藏，具体取决于 cookie 接受度，复选框仅禁用/启用第一个按钮。
html（复选框、调查按钮、提示文本：
<div id="consent-surverymonkey-given" style="display:none" class="form-group">
<input type="checkbox" id="accept-surveymonkey" name='surveymonkey' autocomplete="off" />
<label id="button-accepted" for="accept-surveymonkey" class="checkbox-text">
Nach Anklicken dieser Checkbox und durch Interaktion auf den Button "Angebot anfordern" erklären Sie sich mit unseren <a href="/meta/datenschutz.html" class="text-link-black">Datenschutzbestimmungen</a> einverstanden.
</label>
</div>
<a style="border-radius:40px;" href="/kontakt/blockchain-consulting-angebotsanfrage" target="_self">
<input style="border:none !important;" disabled type="submit" name="consentSurveymonkey" class="button width" id="consentSurveymonkey" value="Angebot anfordern" /></a>
<p id="consent-surverymonkey-denied" style="margin:0;padding:0;">Um das Formular nutzen zu können, müssen Sie zuvor unsere Marketing-Cookies bestätigen.<br>Die Cookie-Schaltzentrale finden Sie
<a class="text-link-black" href="#" onclick="UC_UI.showSecondLayer();">
hier</a>.</p>
这是脚本
<script>
function switchConsentSurveymonkey() {
var isChecked = document.getElementById('accept-surveymonkey').checked;
document.getElementById('consentSurveymonkey').disabled = !isChecked;
}
document.addEventListener("DOMContentLoaded", switchConsentSurveymonkey);
document.getElementById('accept-surveymonkey').addEventListener("change", switchConsentSurveymonkey);
</script>
<script type="text/plain" data-usercentrics="SurveyMonkey">
document.getElementById('consent-surverymonkey-denied').style="display:none";
document.getElementById('consent-surverymonkey-given').style="display:block";
</script>
脚本不是我制作的，而是我们的开发人员制作的，无法联系到。我实际上只是一名设计师，我对 javascript 的了解并不多。但看起来该脚本仅针对 ID，并且由于我们现在有多个要定位的按钮，我们可能应该使用一个类来代替。我试图在脚本中用“getElementsByClassName”切换部分“getElementById”，并将“accept-surveymonkey”、“consentSurveymonkey”、“consent-surverymonkey-given”和“consent-surverymonkey-denied”作为类分配给各自元素而不是 ID，如下所示：
<script>
function switchConsentSurveymonkey() {
var isChecked = document.getElementsByClassName('.accept-surveymonkey').checked;
document.getElementsByClassName('.consentSurveymonkey').disabled = !isChecked;
}
document.addEventListener("DOMContentLoaded", switchConsentSurveymonkey);
document.getElementsByClassName('.accept-surveymonkey').addEventListener("change", switchConsentSurveymonkey);
</script>
<script type="text/plain" data-usercentrics="SurveyMonkey">
document.getElementsByClassName('.consent-surverymonkey-denied').style="display:none";
document.getElementsByClassName('.consent-surverymonkey-given').style="display:block";
</script>
<div style="display:none" class="form-group consent-surverymonkey-given">
<input type="checkbox" class="accept-surveymonkey" id="surveymonkey-checkbox" name='surveymonkey' autocomplete="off" />
<label for="surveymonkey-checkbox" class="checkbox-text button-accepted">
Nach Anklicken dieser Checkbox und durch Interaktion auf den Button "Angebot anfordern" erklären Sie sich mit unseren <a href="/meta/datenschutz.html" class="text-link-black">Datenschutzbestimmungen</a> einverstanden.
</label>
</div>
<a style="border-radius:40px;" href="/kontakt/blockchain-consulting-angebotsanfrage" target="_self">
<input style="border:none !important;" disabled type="submit" name="consentSurveymonkey" class="button consentSurveymonkey" value="Angebot anfordern" /></a>
<p class="consent-surverymonkey-denied" style="margin:0;padding:0;">Um das Formular nutzen zu können, müssen Sie zuvor unsere Marketing-Cookies bestätigen.<br>Die Cookie-Schaltzentrale finden Sie
<a class="text-link-black" href="#" onclick="UC_UI.showSecondLayer();">
hier</a>.</p>
我不确定这是否是正确的方法。可能不是，考虑到我收到控制台错误“Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function”。我的另一个想法是给每个按钮+复选框自己的ID，与其他按钮+复选框分开，并为每个按钮+复选框制作重复的脚本，但我认为这将是一个非常糟糕的做法（如果可行的话）？我不知道还能做什么，所以非常感谢您的帮助！
【问题讨论】：
标签： javascript