Javascript unterbricht anderes script

Amateur · 3. Oktober 2021

Hallo hoffe auf hilfe bin ganz frisch auf dem gebiet der Webentwicklung.

habe zu lernzwecken eine kleine webseite gebaut und javascripte mit eingebunden.

datei slider.js ( habe auf der startseite ein bild was sich ändern soll auf ein anderes )

nichts spektakuläres was leichtes für den anfang um den ablauf zu verstehen.

Code

var i = 0;  

var images = [];   

var time = 3000; 
     

images[0] = "bin/1.jpg";
images[1] = "bin/bin/2.jpg";
images[2] = "bin/bin/3.jpg";
images[3] = "bin/bin/4.jpg";
images[4] = "bin/bin/5.jpg";



function changeImg(){

    document.slide.src = images[i];

    if(i < images.length - 1){
      // Add 1 to Index
      i++; 
    } else {
        i = 0;
    } 
    setTimeout("changeImg()", time);
}

window.onload = changeImg;

Alles anzeigen

Nun versuche ich mich an einer Searchbar mit funktion alles soweit so gut

datei search.js

Code

function Search(item)
{
    var collection = document.getElementsByClassName("listItem");

        
    for (i = 0;i < collection.length; i++)
    {
        if (((collection[i].innerHTML).toLowerCase()).indexOf(item) > -1) 
        {
           collection[i].style.display = "block";
        } 
        else 
        {
            collection[i].style.display = "none";
        }
    }
}

Alles anzeigen

im html

Code

<div id="searchbar">

                    <input type="text" id="inputSearch" oninput = "Search((this.value).toLowerCase())" placeholder="Wonach suchst du ?" autocomplete="off" >
                    <!--<button id="btnSearch" type="submit"  onclick="checkSearch()">Suchen</button>-->
                    
                    <div id="myUL">
                        <a class="listItem" style="display: block;" href="index.php">index</a>
                        <a class="listItem" style="display: block;" href="datenschutz.php">datenschutz</a>
                        <a class="listItem" style="display: block;" href="index.php">Home</a>
                        <a class="listItem" style="display: block;" href="contact.php">contact</a>
                    </div>
            </div>

Alles anzeigen

nun folgendes problem sobald ich in meinem input nach etwas suche und die auswahlmöglichkeiten durch display = "none" verringer stoppt das andere script und das nächste bild was laden soll fällt einfach aus <img src"undefined">

wie kann ich scripte nebenher laufen lassen sodass beides funktioniert.

wäre über jeden tipp dankbar

Sempervivum · 3. Oktober 2021

Das ist ein häufiges Problem und meistens liegt es daran, dass die beiden Skripts den selben Variablennamen verwenden. Auch bei dir trifft das zu, es ist offenbar die Variable i . Wenn Du in der Funktion Search diese Variable lokal anlegst, dürfte das Problem schon behoben sein:

Code

function Search(item)
{
    var collection = document.getElementsByClassName("listItem");
      
    // In der folgenden Zeile das "let" bewirkt, dass die Variable lokal innerhalb
    // der Funktion angelegt wird und die globale Variable i des Sliders nicht
    // mehr beeinflusst:  
    for (let i = 0; i < collection.length; i++)
    {
        if (((collection[i].innerHTML).toLowerCase()).indexOf(item) > -1) 
        {
           collection[i].style.display = "block";
        } 
        else 
        {
            collection[i].style.display = "none";
        }
    }
}

Alles anzeigen

Generell ist gegen eine Variable mit dem Namen i nichts einzuwenden weil jeder weiß, worum es sich dabei handelt aber wenn sie global ist wie beim Slider liegen die Dinge anders. Man könnte sie z. B. iSlider nennen oder den Slider ganz in einer Funktion kapseln.

Amateur · 3. Oktober 2021

Funktioniert einwandfrei danke für deine schnelle hilfe !

Javascript unterbricht anderes script

Jetzt mitmachen!

Teilen