javascript - 带有 javascript 的响应式 HTML 文本框

Question

我想设置我的 .html 和 .js 文件，以便在勾选复选框时更改一些文本。

在我的 html 标题中，我有:

<!-- My own code -->
<script src="js/mycode.js"></script>

在我的 html 正文中，我有:

<input id="TitleCheckbox2" name="TitleCheckbox2" value="your_value" type="checkbox">
    <p  id="TitleCheckText2">  Do you want to strike-out this text? </p> 

在我的 code.js 文件中，我有:

<script>
    if (document.getElementById('TickleCheckbox2').checked) {
        document.getElementById("TitleCheckText2").textContent="<strike>Do you want to strike-out this text?</strike>";
    } else { 
        document.getElementById("TitleCheckText2").textContent="Do you want to strike-out this text? " 
    }
</script>   

编辑:带有 ... 标签的“mycode.js”文件使脚本停止工作!这些都是多余的，在这里没有帮助!

删除这些标签并使用 Manish 的回答后，文本会在复选框被选中时以所需的方式更改。

Answer 1

附JS Fiddle Link

您需要使用 innerHTML 来形成 html 标签。

Javascript:

 function checkboxstatus(currentObj){   
    if (currentObj.checked) {
    document.getElementById("TitleCheckText2").innerHTML="<strike>Do you want to strike-out this text?</strike>";
} else {
    document.getElementById("TitleCheckText2").innerHTML="Do you want to strike-out this text? " 
}
}

HTML:

<input id="TitleCheckbox2" name="TitleCheckbox2" value="your_value" type="checkbox" onclick="checkboxstatus(this);">
    <p  id="TitleCheckText2">  Do you want to strike-out this text? </p>