JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="mytextbox" value="click the button below."/>
<input type="button" value="click" onclick="changeText();"/>

CSS

input{
    width : 400px;
}

JavaScript

function changeText(){
   var text_box = document.getElementById('mytextbox');
    if(text_box.hasAttribute('readonly')){    
        text_box.value = "This text box is editable.";
        text_box.removeAttribute('readonly');
    }else{        
        text_box.value = "This text box is read only.";
        text_box.setAttribute('readonly', 'readonly');    
    }
}