個々のボタンを使用してimgarrays内の画像を変更する

ボタンのドロップダウンメニューを作成しました。その中にサブメニューがあり、その中にそれぞれ1つの画像を別の画像に変更したいとします（それぞれのボタンはドロップダウンカテゴリボタン）私はイメージアレイで考えているので、あまりにも多くの機能を持つ必要はありません。これは、ボタンのドロップダウンのための私のコードです。私はそれがスタイルされていないことに気付きました。また、私は、メニューやボタンの代わりに別の場所に表示するような画像は望んでいません。個々のボタンを使用してimgarrays内の画像を変更する

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.dropbtn { 
    background-color: whitesmoke; 
    color: black; 
    padding: 16px; 
    font-size: 16px; 
    border: none; 
    cursor: pointer; 
} 


    .dropbtn2 { 
    background-color:#f9f9f9; 
    color: black; 
    padding: 8px; 
    font-size: 16px; 
    min-width: 160px; 
    border-style: outset; 
    cursor: pointer; 
} 



.dropbtn:hover, .dropbtn:focus { 
    background-color: #3e8e41; 
} 

.dropdown { 
    position:relative; 
    display: block; 
} 

.dropdown-content { 
    display:none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    overflow: auto; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    z-index: 1; 
} 

.dropdown-choices { 
    display: none; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    overflow:auto; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    z-index: 1; 

    } 



.show {display:block;} 



</style> 
</head> 
<body> 



<div class="dropdown"> 
<button id='btn0'class="dropbtn">Dropdown</button> 
    <div id="myDropdown" class="dropdown-content"> 
    <button id='home' class="dropbtn2">Home</button><br/> 
     <div id="myDropdown2" class="dropdown-choices"> 
     <button value="0"selected>Pencil</button><br/> 
     <button value="1">Eraser</button><br/> 
     <button value="2">Ruler</button><br/> 
     </div> 
    <button id='school' class="dropbtn2">School</button><br/> 
     <div id="myDropdown3" class="dropdown-choices"> 
     <button value="3">Football</button><br/> 
     <button value="4">baseball</button><br/> 
     </div> 

    </div> 
</div> 


<script type="text/javascript"> 


document.getElementById("btn0").addEventListener("click", function(){ 
    document.getElementById("myDropdown").classList.toggle("show"); 
}); 
document.getElementById("home").addEventListener("click", function(){  
    document.getElementById("myDropdown2").classList.toggle("show"); 
}); 
document.getElementById("school").addEventListener("click", function(){  
    document.getElementById("myDropdown3").classList.toggle("show"); 
}); 


</script> 

<script type="text/javascript"> 





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

これはchangeimage（）関数です。ボタンではなく選択メニューを使用しているコードのバージョンで動作するようになっています。それは完璧に働いたが、私はボタン、それを働かせる方法、または仕事に似た何かを得るためにどのようなアイデアを使うのかを知ることはできない。申し訳ありませんが、私自身が自分自身を教えているので、コードが奇妙かもしれません。助けやヒントをありがとう。

<body> 

    <select id="choose_img" onchange="changeImage()" class="OptionMenu1"> 
    <optgroup label="Common Office Supplies"\> 
    <option value="0" selected>Pencil</option> 
    <option value="1">Eraser</option> 
    <option value="2">Ruler</option> 
    </optgroup> 
    <optgroup label="Common Sports Balls"> 
    <option value="3">American Football</option> 
    <option value="4">Baseball</option> 
    </optgroup> 
    </select> 
    <br/> 
    <img id="image" class="Image1"/> 


<script type="text/javascript">  

var imgArray = [ 
"pic_pencil", 
"pic_eraser", 
"pic_ruler", 
"pic_football", 
"pic_baseball" 
]; 

var selectImg = document.getElementById("choose_img"); 
var imgElement = document.getElementById("image"); 

function changeImage() 
{ 
    var index = selectImg.value; 
    imgElement.src = imgArray[index]; 
} 

// select the first image 
changeImage(0);

出典

2017-09-18 Harper Creek

私が問題を理解していれば、ボタンクリックでChangeImage関数を呼び出すことができます。

<button onclick="changeImage(3)">Football</button>

ご希望の場合はお手数ですが、

出典

2017-09-18 15:11:35

「鉛筆
<ボタン値= "1" のonclick = "changeImage（1）">消しゴム
<ボタン値=」<ボタン値= "0" のonclick = "changeImage（0）" を選択> 2 "onclick =" changeImage（2） ">ルーラー
そうですか？私はそれを試みているが、画像はまだ表示されません –

あなたはjsfiddleを提供できますか？ –

個々のボタンを使用してimgarrays内の画像を変更する

答えて

関連する問題