2017-11-27 5 views
0

私のコードに問題があります。学校では、画像に移動するための3つの方法が必要です。 まず方法:http://www.w3im.com/fr/js/js_htmldom_navigation.html 第2の方法:https://developer.mozilla.org/fr/docs/Web/API/Document/getElementById 第3の方法:https://developer.mozilla.org/fr/docs/Web/API/Document/getElementById 私がしようとしたが、問題 が、それはこの最初のexerciceだここで私は知らない:http://bjobard.perso.univ-pau.fr/Cours/CIW/TP5.html は誰も私を助けることができますか?HTMLとJSコードを使ったJavaScriptのHTMLナビゲーション

function changeImageM1(url, nom) { 
 
    console.log("DEBUG : changeImageM1 : url = "+url+", nom = "+nom); 
 
    console.log(document.body.childNodes[3]); 
 
    document.body.childNodes[1].childNodes[3].childNodes[1].innerHTML = nom; 
 
    document.body.childNodes[3].childNodes[1].childNodes[1].firstChild.src = url; 
 

 
    
 
} 
 

 
function changeImageM2(id_url, id_nom, url, nom) { 
 
    console.log("DEBUG : changeImageM2 : id_url = " + id_url + ", id_nom = " + id_nom 
 
       +", url = " + url + ", nom = " + nom); 
 
document.getElementById(id_nom).innerHTML = nom; 
 
document.getElementById(id_url).src = url; 
 
} 
 

 
function changeImageM3(url, nom) { 
 
    console.log("DEBUG : changeImageM3 : url = "+url+", nom = "+nom); 
 

 
    document.querySelector("#id_quoi").innerHTML = nom; 
 
    document.querySelector("#id_image").src = url; 
 
} 
 

 
function changeImage(id_url, id_nom, url, nom) { 
 
    document.getElementById("id_quoi").innerHTML = "Images/yearbyyear-ppg.png"; 
 
    document.getElementById("id_image").src = "Images/all-time-scoring.png"; 
 
}
<!DOCTYPE HTML> 
 
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr"> 
 
    <head> 
 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
 
    <meta charset="utf-8" /> 
 
    <title>Une page web en HTML5</title> 
 
\t \t <script type="text/javascript" src="Pages_libres/galerie.js"></script> 
 
    <link rel="stylesheet" href="Styles/style.css" /> 
 
    </head> 
 
<header> 
 
    <table border="0"> 
 
     <tr> 
 
     <td rowspan="2"> 
 
      <img src="Images/image_accueil.png" alt="Galerie" /> 
 
     </td> 
 
     <td colspan="4"> 
 
      <h1>Galerie</h1> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td><a href="../accueil.xhtml">Accueil</a></td> 
 
    \t \t <td><a href="../Page_imposée/Livre_Choisi/livre.xhtml">Kobe -The Story of the NBA's Rising 
 
\t \t \t \t \t \t \t Young Star Kobe Bryant</a></td> 
 
    \t \t <td><a href="1_presentation.xhtml">Présentation</a></td> 
 
    \t \t <td><a class="actif" href="2_galerie.xhtml">Galerie</a></td> 
 
\t \t \t \t <td><a href="3_connexion.xhtml">Connexion</a></td> 
 
     </tr> 
 
    </table> 
 
    </header> 
 
<body> 
 
    <h1>Kobe Story in 8 Pictures</h1> 
 
    <p><b id="id_quoi">Le début...</b></p> 
 
    <p><img id="id_image" src="Images/image-1-galerie" height="350px"/></p> 
 
    <label>Méthode 1 : </label> 
 
\t <img id="id_trophy" src="Images/trophy.png" height="350px"/> 
 
\t <input type="button" value="All Time lakers" onclick="changeImageM1('Images/lakers-all-time.png', 'All Time Lakers')" 
 
    /> 
 
    <br/> 
 
    <label>Méthode 2 : </label> 
 
    <input type="button" value="scoring-games" onclick="changeImageM2('Images/scoring-games.png', 'id_quoi', 'Images/yearbyyear-ppg.png', 'Score')" 
 
    /> 
 
\t <input type="button" value="Highest PPG" onclick="changeImageM2('Images/highest-ppg.png', 'Highest PPG')" 
 
    /> 
 
\t <br/> 
 
\t <label>Méthode 3 : </label> 
 
    <input type="button" value="PPG" onclick="changeImageM3('Images/yearbyyear-ppg.png', 'PPG')" 
 
    /> 
 
\t <input type="button" value="All Time Scoring" onclick="changeImageM3('Images/all-time-scoring.png', 'All Time Scoring')" 
 
    /> 
 
</body> 
 

 
    <script> 
 
    var bodyTag = document.body; 
 
    var label1 = bodyTag.childNodes[3]; 
 
    var bTag = p1Tag.lastChild; 
 
    var p2Tag = bodyTag.childNodes[5]; 
 
    var imgTag = p2Tag.firstChild; 
 

 
    console.log("p1Tag : "+ p1Tag.innerHTML); 
 
    console.log("bTag : "+ bTag.innerHTML); 
 
    console.log("imgTag : "+ imgTag.src); 
 
    </script> 
 
<body style="height:100%;" oncontextmenu="changeCouleurDeFond()"> 
 
    <h1> CLIC DROIT POUR CHANGER DE COULEUR </h1> 
 
    <script> 
 
    function changeCouleurDeFond() { 
 
    var rgb = [Math.floor(Math.random()* 255), Math.floor(Math.random()* 255), Math.floor(Math.random()* 255)]; 
 
    var rgbfinal =[rgb[0],rgb[1], rgb[2]]; 
 
    document.body.style.backgroundColor = "rgb("+ rgbfinal.join(",")+ ")"; 
 
    document.oncontextmenu = new Function("return false"); 
 
    } 
 
    </script> 
 
</body> 
 
</html>

答えて

0

方法1:あなたは、定義された変数p1Tag、ちょうどp2Tagを持っていません。

方法2:何らかの理由で、渡しているIDをdocument.getElementByIdで見つけることができません。それが理由であるかどうかはわかりませんが、bタグの代わりにスパンを使用する方が良いでしょう。

方法3:同じ、p1タグは定義されていません。

関連する問題