Amazon Mechanical Turk模板加载时隐藏div块JS不生效问题咨询

算力阿峰

2026-9-30

问题核心原因

你遇到的兼容性问题由两个常见的MTurk模板开发坑导致：

模板变量${consent}直接插入JavaScript逻辑时没有包裹引号，当consent字段存在内容时，渲染后的代码会出现语法错误（比如内容包含空格、特殊字符时，直接作为String构造函数参数会被识别为多个变量，直接报错导致JS不执行）
body onload的触发时机早于MTurk的crowd组件渲染完成时机，可能出现调用getElementById时目标元素还未挂载到DOM树的情况，逻辑执行失效

修复方案

直接替换你的HTML代码为下方修改后的版本即可：

<!-- You must include this JavaScript file -->
<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<script type="text/javascript">
// 监听DOM完全加载后再执行逻辑，避免时机问题
document.addEventListener('DOMContentLoaded', function() {
    // 用模板字符串包裹变量，保证所有内容都会被识别为字符串，避免语法错误
    const co = `${consent}`.trim();
    const conDiv = document.getElementById('con_');
    const dataDiv = document.getElementById('data_');
    if(co.length > 2){
        conDiv.style.display = 'block';
        dataDiv.style.display = 'none';
    } else{
        conDiv.style.display = 'none';
        dataDiv.style.display = 'block';
    }
})
</script>

<body>
<!-- You must include crowd-form so that your task submits answers to MTurk -->
<crowd-form answer-format="flatten-objects">
    
<!-- 默认两个div先隐藏，避免加载过程闪烁 -->
<div id="con_" style="display:none;">
    <p> Consent: ${consent}</p>
</div>

<div id="data_" style="display:none;">
     <p> Text: ${variable2}</p>
</div>

</crowd-form>
</body>