使用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

使用innerHTML而不是textContent

document.getElementById("TitleCheckText2").innerHTML="<strike>Do you want to strike-out this text?</strike>";

Answer 2

附JS小提琴链接

您需要使用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>