2017-03-26 12 views
1

私は自分のコーディングを練習しようとしています。実験的なウェブページを作成しました。私はここに私の顔の写真を持っています。画像の表示プロパティを「なし」に設定して、下のボタンを押して画像を削除します。しかし、私は何も試してみることはできないようです。どうしてこれなの?問題はどこにあるのかわからないので、私のコードはすべてここにあります。 getElementByIdない要素なぜこのボタンはこの画像を削除しません

<html> 
<head> 
    <title>TODO supply a title</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <style> 
     body 
     { 
      background-color: wheat; 

     } 

     .name:hover 
     { 
      background-color: aquamarine; 
     } 


     h1 { 
     width: 500px; 
border: 20px outset brown; 
padding: 20px; 
background-color: gold; 
color: goldenrod; 
text-align: center; 
margin: auto; 
     } 

     img { 
      height: 500px; 
      border: 2px solid black; 
     } 
    </style> 
</head> 
<body> 
    <h1>DENNIS MARKHAM'S FUNSITE</h1> 
    <br> 
    <p>Hi, this is <span class = "name"> Dennis</span>, and I'm creating this website just for fun. And 
    I guess for practice too.</p> 
    <p>As you can see, my name highlights when you scroll over it. Isn't that cool? 
     Well I think it is. </p> 
    <p>I think this could use a background image to give it a more...woody look. 
    But the problem is I don't understand shit about background images. That's a problem indeed. 
    </p> 
    <p>Oh well, let's do a picture:</p> 
    <br> 
    <img id = "me" src ='IMG_1742.jpg' alt='my face'> 
    <br> 
    <script type = "text/javascript"> 
     function remove(){ 
      document.getElementsById("me").style.display = "none"; 

      //not sure why this doesn't work, but okay 
     } 
    </script> 
    <button type="button" OnClick="remove()">Remove Picture</button> 


</body> 

答えて

3

+0

ハハハ!うわー!ありがとう。とても簡単!しかし、私がgetElementsByTagNameを使用していて、それもうまくいきませんでした...この場合、Elementsは実際には正しかったのですが、なぜそれは機能しませんでしたか? –

+0

@DennisMarkham getElementsByTagNameは配列を返します。したがって、返された配列から最初に必要な要素にアクセスする必要があります。 –

+0

@OusmaneMahyDiawは完全な説明をしました。 =) –

0

「s」が追加されました。お試しください: document.getElementById("me")

0

//ここに回答です。あなたは間違った言葉を書いた。 このコードを置くdocument.getElementById( "me")。style.display = "none";あなたのコードを置き換えるには、間違った単語はgetElementByIdではなくgetElementsByIdです。とった?

+0

あなたのコードをフォーマットするためにこれを読んでください。 https://meta.stackoverflow.com/questions/251361/how-do-i-format-my-code-blocks – IsuruAb

関連する問題