Почему "ломается" input?

Question

Я делаю скрипт поиска по всей странице и у меня появилась проблема. После первого поиска перестает работать input - скрипт не видит нового значения value в этого input`a, если в нем написать чтото новое. Что я делаю не так?

Примерный код html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv='Content-Language' content='ru'>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
    <meta name='viewport' content='width = device-width,height = device-height, initial-scale = 1'>
    <link rel='stylesheet' href='styles.css' type='text/css'>
</head>
<body>
<div id="find">
    <input type="text" name="search" id="search" placeholder="Пошук" title=""/>
    <div id="panel"></div>
</div>
<div>
    <a href="1.html">1</a>
    <a href="2.html">2</a>
</div>
<div id="text">
<p>
До основних аксіом і правил створення, організації та ведення бізнесу можуть бути віднесені такі основні припущення й твердження, а саме:<br>
1.  У переважній більшості бідні люди мріють стати багатими. Переважна більшість багатих людей мріє зберегти своє багатство. Ніхто не мріє бути бідним.<br>
.... текст...
</p>
</div>
<script src='search.js'>
</script>
</body>
</html>

Код js:

var searchInput = document.getElementById('search');// поле пошуку
var findElement = document.querySelectorAll("*");// тег в якому знаходитьсяя текст книги
var panel = document.getElementById('panel'); // тег в якому будуть мітки
var def = findElement;
var color1 = "rgb(255, 153, 0)";
var color2 = "yellow";
var searched = false;

searchInput.addEventListener("input",function() {
        searched = false;
        panel.style.display = "none";
        panel.innerHTML = "";
        for (var i = 0; i < findElement.length; i++){
            if(findElement[i].localName != ("html" || "meta" || "head" || "body" || "link" || "script" || "input" || "style" || "br"))
            findElement[i].innerHTML = def[i].innerHTML;
        }
        localStorage.setItem("search", "");
});

document.addEventListener("DOMContentLoaded",function(){
    if(localStorage.getItem("search")){
        setTimeout(function(){
            if(localStorage.getItem("search") != ""){
            searchInput.value = localStorage.getItem("search");
            search();
        }},3000);
    }
});
function search() {
    if(searched == false){
        var findText = searchInput.value;
        if (findText == "") {
            return;
        } 
        else {
            // findElement.innerHTML = findElement.innerHTML.replaceAll(eval('/'+findText+'/gi'),"<span class='mark' style='background:yellow'>$&</span>");

            for (var i = 0; i < findElement.length; i++){
                if(findElement[i].localName != ("html" || "meta" || "head" || "body" || "link" || "script" || "input" || "style" || "br"))
                findElement[i].innerHTML = findElement[i].innerHTML.replaceAll(eval('/'+findText+'/gi'),"<span class='mark' style='background:yellow'>$&</span>");
            }
            if(!document.getElementsByClassName('mark')[0]){}
            else{
                document.getElementsByClassName('mark')[0].style.background = color1;
                panel.style.display = "block";
                searched = true;
                var mark = document.getElementsByClassName('mark');
                nextFind(mark);
                markPanel(mark);
                localStorage.setItem("search", findText);
            }
        }
    }
    else{
        var mark = document.getElementsByClassName('mark');
        nextFind(mark);
    }

}

searchInput.addEventListener("keydown",function(event) {
    if(event.key == "Enter"){
        search();
    }
});

window.addEventListener("keydown", function(event) {
  if (event.keyCode == 114) {
        event.preventDefault();
        searchInput.focus();
        return;
    }
});

function findPos(obj) {
    var curtop = 0;
    if (obj.offsetParent) {
        do {
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
    return [curtop];
    }
}

var m = 0;
function nextFind(mark) {
    var max = mark.length;
    console.log(max);
    
    for(i = 0; i < max; i++){
        mark[i].style.background = color2;
    }
    console.log(m);
    window.scrollTo(0,findPos(mark[m]) - 20);
    mark[m].style.background = color1;
    m++;
    if(m >= max){
        m = 0;
    }
    console.log(m);
}
function toElem(n){
    var mark = document.getElementsByClassName('mark');
    var max = mark.length;
    window.scrollTo(0,findPos(mark[n]) - 20);

    for(i = 0; i < max; i++){
        mark[i].style.background = color2;
    }
    mark[n].style.background = color1;
}
function markPanel(mark){
    var max = mark.length;
    var docHeight;
    if(window.innerHeight > document.documentElement.offsetHeight){
        docHeight = window.innerHeight;
    }
    else{
        docHeight = document.documentElement.offsetHeight;
    }
    var pHeight = panel.offsetHeight;
    var result ;
    var style = "width: 5px;height: 5px;background: lime;border-top: solid 1px black;position: absolute;";
    for(i = 0; i < max;i++){
        result = mark[i].offsetTop / docHeight;
        panel.innerHTML += '<div class="markers" style="'+style+'top:'+ (result * 99) +'%;" onclick="toElem('+i+')"></div>';
    }
}

БЛОГ НА HUSL

Почему "ломается" input?

Ответы (0 шт):