Button won't stay OFF

HTML

<header>
<h1>GROUND FLOOR</h1>
</header>

<nav>
<pre>
    <center><a href="Home.html"><b>HOME</b></a></center>
    

    <center><a href="GF.html"><b>Ground<br>Floor</b></a></center>
     
  <b>1st Floor</b>
     <a href="F1WS1.html">WS1</a>
     <a href="F1WS2.html">WS2</a>
     <a href="F1WS3.html">WS3</a>
    
  <b>2nd Floor</b>
     <a href="F2WS1.html">WS1</a>
     <a href="F2WS2.html">WS2</a>
     <a href="F2WS3.html">WS3</a>
    
  <b>3nd Floor</b>
     <a href="F3WS1.html">WS1</a>
     <a href="F3WS2.html">WS2</a>
  </pre>

<input type="button" value="On" id="onoff" onclick="onoff();">HINT

</nav>
<section>
<h1>Choose a Box</h1>
<ul id="fruit">Fruit
</ul>
<ul id="veg">Veg
</ul>
<ul id="games">Games
</ul>



</section>

<article>
<ul id="dragsource">
<li id="item1" draggable="true">Apple</li>
<li id="item2" draggable="true">Banana</li>
<li id="item3" draggable="true">Orange</li>
<li id="item4" draggable="true">Pear</li>
<li id="item5" draggable="true">Carrot</li>
<li id="item6" draggable="true">Pea</li>
<li id="item7" draggable="true">Potato</li>
<li id="item8" draggable="true">Sprout</li>
<li id="item9" draggable="true">Chess</li>
<li id="item10" draggable="true">Dominos</li>
<li id="item11" draggable="true">Monopoly</li>
<li id="item12" draggable="true">Twister</li>
</ul>


</article>


<footer>
Copyright © Aceuk007.com
</footer>
<script>
function onoff(){
  currentvalue = document.getElementById('onoff').value;
  if(currentvalue == "Off"){
    document.getElementById("onoff").value="On";
  }else{
    document.getElementById("onoff").value="Off";
  }
}

window.onload=function(){
 var target1=document.getElementById("fruit");
 var target2=document.getElementById("veg");
 var target3=document.getElementById("games");




 var list=document.querySelectorAll("#dragsource li");
 for(i=0;i<list.length;i++){
 list[i].draggable=true;
 list[i].ondragstart=function(event){
 var event=event||window.event;
 var dt=event.dataTransfer;
 dt.setData("text",...

CSS

html{
background-color:silver; 
font-family;times new roman; 
color:black; 
}

header {
    background-color:black;
    color:yellow;
    text-align:center;
    padding:5px;	 
}
nav {
    line-height:20px;
    background-color:yellow;
    height:625px;
    width:100px;
    float:left;
    padding:5px;
	}


section {
    height:220px;
    text-align:center;
    padding:5px;	 	 
}
#fruit{width:90px;height:120px;left:520px;top:150px;padding:10px;border:2px solid green;position:absolute;}
#veg{width:90px;height:120px;left:670px;top:150px;padding:10px;border:2px solid green;position:absolute;}
#games{width:90px;height:120px;left:820px;top:150px;padding:10px;border:2px solid green;position:absolute;}

#veg > *{display: none;} 
#fruit > *{display: none;}
#games > *{display: none;}


article {
background-color:aqua;
    height:395px;
    padding:5px;

}
ul {
margin:left;
column-count: 6;
column-gap: 20px;
column-width:auto;
text-align:left;
}
li {
break-inside: avoid-column;
overflow: hidden;
list-style-type:none;
padding:5px;
margin:5px;
background-color:#CCCCFF;
border:2px double #CCCCCC;

}
footer {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;	 	 
}