Search function error || Search result is garbled

Search function error || Search result is garbled
0.0 0

#1

Web Page can be seen here.
https://ruoningtrail.neocities.org
If will be really grateful, if you could help me go through it.
57

type or paste code here
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>   
#input {position: sticky; top:0 ;width:16%; background-color: transparent;border:solid ;}
#bnt {position: sticky; top: 0;background-color: transparent; text-align: center;font-family:Futura;font-size: 1vw; width: 8%;} 
#bnt:hover{background-color: rgb(0, 255, 255);} 
#tab1 {border:transparent ;border-collapse: collapse; margin: 0 auto ; width: 100%;text-align: center;font-family:Futura;font-size: 1vw }
th {height: 7vw ;text-decoration-line: underline; }
tr:hover{background-color: rgb(0, 255, 255);} 


td { height: 15vw;}


#bnt1 {border:transparent ;width: 50%; height: 15vw; margin: 0 auto; }   /*button*/
#link {text-align: center; font-family: Futura; font-size: 3vw ; text-decoration:none; color: black;}
.flag {display: none; max-width: auto; max-height: 13vw; margin-left: auto;
    margin-right: auto/*  border-radius: 10px;  border: solid white;*/ }
</style>
<script>
window.onload=function (){
    var oBnt1=document.getElementById("bnt");
    var oLink=document.getElementById("link")
    var oTxt1=document.getElementById("input");
    var oBnt=document.getElementById("bnt1");
    var oTab=document.getElementById('tab1');
    var aTxt=document.getElementsByClassName('txt1');
    var aImg=document.getElementsByClassName('flag');

    oBnt.onmouseover=function (){//button
    oBnt.style.background="rgb(0, 255, 255)"
    oBnt.value="click"
    }
    oBnt.onmouseout=function (){
    oBnt.style.background="none"
    oBnt.value="More Countries"
    }


    oLink.onmouseover=function (){//button text
       oLink.innerHTML="click"
      oLink.style.textDecorationLine="underline"
    }
    oLink.onmouseout=function (){
      oLink.innerHTML="More Countries"
      oLink.style.textDecorationLine="none"
    }

 oBnt1.onclick=function (){//search
  for(let i=0;i<oTab.tBodies[0].rows.length;i++){ 
     
      var sTab=oTab.tBodies[0].rows[i].innerHTML
     
      
        if(sTab.search(oTxt1.value)!=-1){
          alert(oTab.tBodies[0].rows[i].cells[0].innerHTML)
      
        }
      }
		}

	

for (let i=0; i<aImg.length; i++){//flag
let timer=null
aImg[i].onmouseover=aTxt[i].onmouseover=function() {
clearTimeout(timer)
aImg[i].style.display="block"
aTxt[i].style.display="none"
}
aImg[i].onmouseout=aTxt[i].onmouseout=function() {
timer=setTimeout(function (){
    aImg[i].style.display="none" 
    aTxt[i].style.display="block"},300)}
}  
}

</script>
</head>
<body>
    <input id="input" type="text" title="My speed">
    <button id="bnt" title="Input you seppd">search</button>
    <div overflow-x:auto><table id="tab1" border="1" item-width="300pxs">
    <thead>
     <tr>     
       <th>Country</th>
       <th>Max Speed</th>
     </tr>
    </thead>
    <tbody>
     <tr>
        <td> 
        <div> <img  class="flag" src="au.svg"></div>
        <span class="txt1">Australia</span>
        </td>
        <td style="font-size: 3vw">110</td>
     </tr>
     <tr>
        <td> 
        <div> <img  class="flag" src="at.svg"></div>
        <span class="txt1">Austria</span>
        </td>
        <td style="font-size: 3vw">130</td>
     </tr>
     <tr>
        <td> 
        <div> <img  class="flag" src="be.svg"></div>
        <span class="txt1">belgium</span>
        </td>
        <td style="font-size: 3vw">120</td>
     </tr>
        <td>Brazil</td>
        <td style="font-size: 3vw">120</td>
      </tr>
      <tr>
        <td>Bulgaria</td>
        <td style="font-size: 3vw">140</td>
      </tr>
      <tr>
        <td>Canada</td>
        <td style="font-size: 3vw">120</td>  
      </tr>
      <tr>
        <td>China</td>
        <td style="font-size: 3vw">120</td>
      </tr>
        <td></td>
        <td style="font-size: 3vw"></td>
      </tr>
        </tr>
        <td> </td>
        <td style="font-size: 3vw"> </td>
      </tr>
        </tr>
        <td> </td>
        <td style="font-size: 3vw"> </td>
      </tr>
        </tr>
        <td> </td>
        <td style="font-size: 3vw"> </td>
      </tr>
        </tr>
        <td> </td>
        <td style="font-size: 3vw"> </td>
      </tr>
        </tr>
        <td> </td>
        <td style="font-size: 3vw"> </td>
      </tr>

   </tbody>
    </table></div>
    <div>
   <button id="bnt1"  title="wikipedia"><a id="link" href="https://en.wikipedia.org/wiki/Speed_limits_by_country#Countries">More Countries</a></button>
  </div>
 </body>
</html>

#3

You need to explain in detail what you are trying to achieve with the code you have posted and also explain what you expect the code to do vs. what it is doing instead.