Déplacement d'un objet

Dams971
Javascript

Bonjour,

Je rencontre un petit problème avec mon code. Aidez-moi s'il vous plaît. (je met pas le code css pour pas surchargé)

Ce que je fais

// Code body html

<body onkeypress="move(event);">
    <!--<div class="point fire" style="left:40%;"></div>-->
    <!--<div class="point water" style="left:75%;bottom:10%;"></div>-->
    <div class="point"></div>
    <div id="ground" class="block"></div>
    <div id="lake" class="block"></div>
    <img id="braze" src="https://theem.bl.ee/univ/tp/l2/braze.gif">
    <img class="algue" style="left:90%;" src="https://theem.bl.ee/univ/tp/l2/algue.gif">
    <img class="algue" style="left:93%;height:100px;"src="https://theem.bl.ee/univ/tp/l2/algue.gif">
    <img class="algue" style="left:85%;"src="https://theem.bl.ee/univ/tp/l2/algue.gif">
    <img class="fish" style="left:100%;"src="https://theem.bl.ee/univ/tp/l2/fish1.gif">
    <div id="life-stat"></div>
    <script type="text/javascript" src="point.js"></script>
</body>

//               //                             //

// Code Javascript

//Variables globales
var point = new Object();
point.life = 100;
point.etat = "";
point.x = 5;
point.y = 30;
function displayPoint(){
    document.getElementsByClassName('point').style.left = point.x + "px";
    document.getElementsByClassName('point').style.top = point.y + "px";
}

// A compléter..
/* Initialiser la position du point */
document.onkeypress= move;
//Fonctions
function move(evt) {
    console.log(evt.key);
    switch (evt.keyCode){
        case 113:
            console.log('left');
            /* Déplacer le point */
            point.x -= 5;
            displayPoint(); 
            /* Mettre à jour la position du point */
            //displayPoint();
            checkPosition();
            break;
        case 100:
            console.log('right');
            // A compléter..
            /* Déplacer le point */
            point.x += 5;
            displayPoint();
            /* Mettre à jour la position du point */
            checkPosition();
            break;
    }

}
function checkPosition() {
    // A compléter..
    /* Verifier la position */
    /* Changer d'etat class .fire ou .water */
    /* Perdre de la vie */
}

function gavite() {
    // TRY-CATCH
    /* Garder le point est au sol */
}

function loseLife() {
    // A compléter..
    /* Perdre de la vie toute les 0.5s dans le feux */
    /* Perdre de la vie toute les 1s dans l'eau */
}

function printJSON() {
    console.log(point);
}

/* ALLER PLUS LOIN */
function jump(argument) {
    // A compléter..
    /* Faire un saut de 100 px */
}

window.focus();

Ce que je veux

Je cherche à résoudre le problème de déplacement qui ne s'effectue pas ! J'ai regardé dans divers forums mais cela ne m'aide pas.

Ce que j'obtiens

Voici les erreurs que j'obtiens dans ma console :

point.js:12 Uncaught TypeError: Cannot set property 'left' of undefined
at displayPoint (point.js:12)
at move (point.js:29)
at HTMLBodyElement.onkeypress (point.html:8)

4 réponses

Lartak
Réponse acceptée

Bonsoir.
L'erreur est normale étant donné que tu utilises une méthode qui récupère plusieurs éléments getElementsByClassName, si tu ne veux récupérer qu'un seul élément, utilises plutôt par exemple la méthode querySelector, soit:

const pointElem = document.querySelector('.point')
pointElem.style.left = `${point.x}px`
pointElem.style.top = `${point.y}px`
Dams971
Auteur

Bonsoir, je vous remercie de votre réponse ! Malheureusement, j'ai encore une erreur :

Cannot read property 'style' of null
    at displayPoint (point.js:13)
    at move (point.js:39)
    at HTMLBodyElement.onkeypress (point.html:8)

J'ai tenté de le résoudre moi-même mais je ne vois pas pourquoi cela renvoie null sachant que la class selectionné est unique et que j'ai fait aucune faute d'orthographe.

Lartak

Montres le code que tu as fait (corrigé).

Dams971
Auteur

Oupps désolé c'est bon ! j'avais oublié de mettre le point pour signifier que c'était une classe ... Désolé Monsieur
Merci pour votre patience !