JavaScript：画像ボタン

私はJavaScriptクイズを持っており、ユーザーがボタンをクリックすると画像が表示されるようにしたいと考えています。たとえば、正しい回答をクリックすると、緑色の盛り上がりが表示されます。ここに私のコードは、現時点では次のとおりです。JavaScript：画像ボタン

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>JavaScript Task 1</title> 
 
    <meta charset="UTF-8"> 
 
    <style> 
 
    ul { 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 0; 
 
     overflow: hidden; 
 
     background-color: #333; 
 
     border-style: solid; 
 
    } 
 
    li { 
 
     float: left; 
 
    } 
 
    li a { 
 
     display: block; 
 
     color: black; 
 
     text-align: center; 
 
     padding: 14px 55px; 
 
     text-decoration: none; 
 
    } 
 
    li a:hover { 
 
     background-color: #111; 
 
     border-style: solid; 
 
    } 
 
    .tasks { 
 
     color: black; 
 
     font-size: 250%; 
 
     text-align: center; 
 
    } 
 
    .t&f { 
 
     color: white; 
 
     font-size: 250%; 
 
     text-align: center; 
 
     border-style: solid; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <ul> 
 
    <li> 
 
     <a href="index_page.html">Home</a> 
 
    </li> 
 
    <li> 
 
     <a href="task1.html">Task 1</a> 
 
    </li> 
 
    <li> 
 
     <a href="task2.html">Task 2</a> 
 
    </li> 
 
    <li> 
 
     <a href="task3.html">Task 3</a> 
 
    </li> 
 
    <li> 
 
     <a href="task4.html">Task 4</a> 
 
    </li> 
 
    <li> 
 
     <a href="task5.html">Task 5</a> 
 
    </li> 
 
    <li> 
 
     <a href="task6.html">Task 6</a> 
 
    </li> 
 
    <li> 
 
     <a href="task7.html">Task 7</a> 
 
    </li> 
 
    </ul> 
 
    <script src="script-1.js" type="text/javascript"> 
 
    </script> 
 
    <script> 
 
    </script> 
 
    <div class='tasks'> 
 
    <div class='container'> 
 
     <h1>Task 1</h1> 
 
    </div> 
 
    </div> 
 
    <div class='tasks'> 
 
    <div class='container'> 
 
     <h3>True or False Quiz</h3> 
 
     <h5>Question One</h5> 
 
     <h6>1) Michael Jackson’s Thriller is the greatest-selling album of 
 
      all time.</h6> 
 
     <button onclick="document.bgColor='Green'; alert('Correct! Good job :)')">True</button> 
 
     <button onclick="document.bgColor='Red'; alert('Wrong! Unlucky. Try again :(')">False</button> 
 
    </div> 
 
    </div> 
 
    <div class='tasks'> 
 
    <div class='container'> 
 
     <h5>Question Two</h5> 
 
     <h6>2) The modern Caesar salad is derived from a recipe dating back 
 
      to ancient Rome.</h6> 
 
     <button onclick="document.bgColor='Red';alert('Wrong! Unlucky. Try again :(')">True</button> 
 
     <button onclick="document.bgColor='#00cc00'; alert('Correct! Good job :)')">False</button> 
 
    </div> 
 
    </div> 
 
    <div class='tasks'> 
 
    <div class='container'> 
 
     <h5>Question Three</h5> 
 
     <h6>3) Ozone is "good" in the upper atmosphere but "bad" in the 
 
      lower.</h6> 
 
     <button onclick="document.bgColor='Green'; alert('Correct! Good job :)')">True</button> 
 
     <button onclick="document.bgColor='#ff3300'; alert('Wrong! Unlucky. Try again :(')"> 
 
     False</button> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

多くのおかげ

ジェームズ

出典

2016-04-27 james_nika

あなたの質問をしてください?? – praguan

最初にCSSをHTMLから分離します。そして、私の助言は、JQuery（DOM操作のための最も簡単なライブラリ - 私の意見）を学ぶことです。 –

ユーザーがボタンをクリックしたときに画像を表示するにはどうしたらいいですか？ @praguan –

あなたはjavascriptで

<button id="mybutton" onclick="showButton()">Show Image </button>

0を試すことができます

function showButton(){ 
    image = document.getElementById('nameOfImageHere'); 
    image.style.display = "block"; 
}

出典

2016-04-27 12:39:11

前の表示=なしであることを確認してください。 –

はい、以前はdisplay = noneにする必要がありました。同じ機能の他のボタンを使用することもできますが、image.style.display = "none"に変更することができます –

ここに私達は行く：

1方法：あなたはjQueryの隠す（）、ショー（）関数を使用可能性があります

  <script> 
      $(document).ready(function(){ 
       $("#buttonIdShow").click(function(){ 
        $("#Image").hide(); 
       }); 
       $("#buttonIdHide").click(function(){ 
        $("#Image").show(); 
       }); 
      }); 
      </script> 



     <img id="Image"/>    <!-Here is your image--> 
    <button type="button" id="buttonIdShow">Show</button> <!--Show button--> 

    <button type="button" id="buttonIdHide">Hide</button> <!--Hide button-->

2方法：jQueryのアニメーションCSS表示：

を

<script> 
$("#yourButton1Id").click(function(){ 
    $("#ImageId").css("display","block"); 
}); 

$("#yourButton2Id").click(function(){ 
    $("#ImageId").css("display","none"); 
}); 
</script>

希望する;）

出典

2016-04-27 12:42:26 praguan

@james_nika私の解決策が役に立ったらplsマークアップ、Thanx;） – praguan

答えて

関連する問題