Реактивное текстовое поле HTML с javascript

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», имеющий ... теги, остановил работу скрипта! Это лишние, и здесь не полезно!

После удаления этих тегов и ответа Маниша текст изменяется желаемым образом, когда галочка отмечена галочкой.

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> 

Answer 2

Использование innerHTML, а TextContent

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