checkbox on checked state changes заголовок текст

Question

<input type="checkbox" id="chk"> 
<label for="chk"></label> 
<h1 id="header">Lorem ipsum</h1> 
var chk = document.querySelector('#chk'); 
var header = document.querySelector('#header'); 
if(chk.checked) 
    header.innerHTML = "state 1"; 
else 
    header.innerHTML = "Lorem ipsum"; 

So. когда флажок установлен в тексте с изменениями в «состояние 1» , когда неконтролируемое (состояние по умолчанию) текст возвращается в «состояние 2». Этот код не работает, что я хочу

Answer 1

Hi Bro!

<input type="checkbox" id="chk"> <label for="chk"></> <h1 id="header">Lorem ipsum</h1>

`

var chk = document.querySelector('#chk'); 
var header = document.querySelector('#header'); 

chk.addEventListener('change', function (e) { 
    if(chk.checked) 
     header.innerHTML = "state 1"; 
    else 
     header.innerHTML = "state 2"; 
}); 

`

Answer 2

Вот простое решение. Надеюсь, поможет!

function myFunction(mycheckbox, label) { 
 
     document.getElementById(label).innerHTML = mycheckbox.checked ? "state 1" : "state 2"; 
 
}

<input type="checkbox" onclick="myFunction(this, 'header');" /> 
 
<label for="chk" id="header">Lorem ipsum</label>