Blocage et déblocage d'une zone de texte

La page

Vous pouvez changer le contenu de la zone de texte...

Le code

Le code HTML

<p style="text-align:center;"><input type="button" id="baliseInputBtn" value="Bloquer/Débloquer">&nbsp;<input type="text" id="baliseInputText" value="Tapez votre texte" size="50"></p>
<p style="text-align:center; font-style:italic; font-size:80%" id="baliseP">Vous pouvez changer le contenu de la zone de texte...</p>

Le code JavaScript

document.querySelector('#baliseInputBtn').addEventListener('click', function() {
	if(document.querySelector('#baliseInputText').readOnly) {
		document.querySelector('#baliseInputText').readOnly = false;
		document.querySelector('#baliseP').innerHTML = "Vous pouvez changer le contenu de la zone de texte !!!";
	} else {
		document.querySelector('#baliseInputText').readOnly = true;
		document.querySelector('#baliseP').innerHTML = "Vous ne pouvez pas changer le contenu de la zone de texte !!!";
	}	
});