Script ne fonçtionne pas

Résolu/Fermé

Utilisateur anonyme - Modifié le 17 févr. 2019 à 18:44
Utilisateur anonyme - 19 févr. 2019 à 14:25

Salut j'ai suivi à la lettre le code et les instructions d'un tutoriel sur youtube https://www.youtube.com/watch?v=_MnNjyDSMgk&t=210s montrant comment réaliser un simple dictionnaire pour débutant en Javascript. Le code ne fonctione pas pour moi voici le code :

<!DOCTYPE html>
<html>
    <head>
        <title>English Dictionary</title>
    </head>
    <style>
    body {
    font-size:20px;
}

.header {
    width: 50%;
    margin: 40px auto 0px;
    color: white;
    background: #483D8B;
    text-align: center;
    border: 1px solid gray;
    border-radius: 8px 8px 0px 0px;
}

.wrapper {
    width: 50%;
    margin: 0px auto;
    border:1px solid gray;
    
}

.wrapper:after {
    content: "";
    display: block;
    clear:both;
}

.words {
    width: 29%;
    background: #dcdcdc;
    padding-top: 10px;
    float: left;
}

.word {
    width: 69%;
    float: left;
    padding-left: 10px;
}

#word_list {
    max-height: 400px;
    overflow-y: scroll;
}

li {
    list-style-type: none;
    line-height: 1.4em;
}

li:hover {
    cursor: pointer;
    color: #483D8B;
}

ul {
    margin-left: -10px;
}

h3 {
    color: #483D8B;
}

#search {
    margin-left: 10px;
    width: 60%;
    padding: 5px;
    height: 13px;
}

button {
    height: 27px;
    background: #483D8B;
    color: white;
    border: none;
    border-radius: 4px;
}
</style>
    <body>
    <div class="header">
        <h1>English Dictionary</h1>
        
    </div>
    
    <div class="wrapper">
        <div class="words">
            <input type="text" id="search" placeholder="search...">
            <button onclick="search()">Go</button>
            
            <ul id="word_list">
                <li>apple</li>
                <li>baby</li>
                <li>car</li>
                <li>computer</li>
                <li>mosquito</li>
            </ul>
        </div>
        
        <div class="word">
            <h3 id="word_text"></h3>
            <p id="definition"></p>
            
            <hr>
            
            <h3>Related words:</h3>
            <li id="related"></li>
        </div>
    </div>
    </body>
</html>
<script type="text/javascript">
    var dictionary = [
        {
            word:"apple",
            def:"A round fruit with seeds in its center",
            rel:["mango","pear","guava"]
        },
        {
            word:"baby",
            def:"The young one of a human",
            rel:["child","toddler","teen"]
        },
        {
            word:"car",
            def:"Transports poaple from place to place",
            rel:["bus","bicycle","truck"]
        },
        {
            word:"computer",
            def:"An electronic device",
            rel:["laptop","tablet","palmtop"]
        },
        {
            word:"mosquito",
            def:"An insect",
            rel:["ant","beetle","butterfly"]
        },
    ];

    // fill the dictionary with words
    
    init = function(){
        for (var i = 0; i< dictionary.length; i++) {
        document.getElementById('word_list').innerHTML += "<li onclick='show(" + i +")'>"; +
        dictionary[i].word + "</li>";
        }
    }

    // call the init function when page loads
    init();

    // display the word, its definition and related words
    show = function(i){
        document.getElementById('word_text').innerHTML = dictionary[i].word;
        document.getElementById('definition').innerHTML = dictionary[i].def;

        var list = "";

        for (var j = 0; j < dictionary[i].rel.length; j++) {
            list += "<li>" + dictionary[i].rel[j] + "</li>";
            document.getElementById('related').innerHTML = list;
        }
        
    }

    show(0);

</script>

A voir également:

Script ne fonçtionne pas
Script vidéo youtube - Guide
Ghost script - Télécharger - Polices de caractères
Script bat - Guide
Microsoft activation script - Accueil - Windows
Executeur de script - Télécharger - Édition & Programmation

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38309 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
17 févr. 2019 à 21:38

Bonjour,

Déjà... le script se place avant le </body> ... pas après le </html>.

Ensuite.. ton bouton déclenche la fonction search() ... sauf que.. ben.. cette fonction n'est pas dans le code que tu nous montres...

Utilisateur anonyme
17 févr. 2019 à 22:02

pour le bouton search c'est l'étape suivante parceque j'ai arreter de coder normalement là ou je suis arrivé dans le code html quand je clique sur le mot car ça affiche la definition mais comme ça ne marche pas j'arrete á ce niveau ey je passe pas au bouton search ce que je comprent pas c'est que ça march dans le tuto puisque il montre les resultats en avançant dans le code je pense peut etre que le javascript sur mon pc ne marche pas bien je ne sais pas je suis vraiment deçu

jordane45 Messages postés 38309 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
17 févr. 2019 à 23:16

Tu dois retirer les mots qui sont dans ta liste
et pour ton code js... tu as un ; en trop.
Il faut juste

 init = function(){
        for (var i = 0; i< dictionary.length; i++) {
        document.getElementById('word_list').innerHTML += "<li onclick='show(" + i +")'>" + dictionary[i].word + "</li>";
        }
    }

Utilisateur anonyme
18 févr. 2019 à 14:28

ç a marché merci beacoup jordan45 problème résolu maintenemt je peux passer à l'étape suivante du bouton search

Utilisateur anonyme
18 févr. 2019 à 15:21

maintenent la fonction search ne marche pas


 // search functionality
    search = function(){
        query = document.getElementById('search').value;

        if (query == "") {
            return;
        }

        found = -1; // initialize found to false

        for (var i = 0; i < dictionary.length; i++) {
            if (query == Dictionary[i].word) {
                found = i;
                break;
            }else {
                document.getElementById('word_text').innerHTML = "Word not found";
                document.getElementById('definition').innerHTML = "The word you entered is not found in our dictionary";
                document.getElementById('related').innerHTML = "No related words";
            }
        }

        if (found >= 0) {
            show(found);
        }
    }

</script>
</body>
</html>

Utilisateur anonyme
19 févr. 2019 à 14:25

c'est bon ça fonction maintenemt en fait il fallait ecrire dictionary et pas Dictionary in this line :


if (query == Dictionary[i].word)

Résolu Merci

Discussions similaires

recherche script "les visiteurs"

Problème Avast "HTML:Script-inf"

executer un fichier .py sous linux

Liste COMPLETE des commandes .bat

Batch file execute command prompt