SOURCE

let divs = document.querySelectorAll('.wrapper>div')

let flag = false

divs.forEach(item=>{
  item.addEventListener('click',function(){
    let preSib = divs[0].parentNode.previousElementSibling
    if(flag){
      item.innerHTML = ''
      let boo = [...divs].every(item=>item.innerHTML=='')
      if(boo){
        flag = !flag
        preSib.innerHTML = '输入文字';
      }
        
    }else{
      let str = prompt()
      if(str.length!=4)return alert('error');
      divs.forEach((item,index)=>{
        item.innerHTML = str[index]
      })
      flag = !flag
      preSib.innerHTML = '删除文字'
    }
  })
})

<h1>输入文字</h1>
<div class="wrapper">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

.wrapper{
  border:2px solid cyan;
  display:flex;
  justify-content:center;
}
.wrapper div{
  width:50px;
  height:50px;
  line-height:50px;
  font-weight:bold;
  color:red;
  text-align:center;
  border:2px solid purple;
  margin:10px;
}
.wrapper div:hover{
  border-color:red;
}