javascriptをドロップダウンしても動作しない

Question

私はJavaScriptのメニューを持っています。ホバーとメインメニュー項目のクリックは機能しますが、私はドロップダウンを動作させることができません。

menu.js私は次のようにドロップダウンがあるしたいメニューの

/* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */ 
function myFunction() { 
    //document.getElementById("myDropdown").classList.toggle("show"); 
    //document.getElementsByClassName("dropdown-content").show); 
    //document.getElementById("pmd").classList.toggle("show"); 
    pmd.show; 
} 
} 
// Close the dropdown if the user clicks outside of it 
window.onclick = function(event) { 
    if(!event.target.matches('.dropbtn')) { 
    var dropdowns = document.getElementsByClassName("dropdown-content"); 
    var i; 
    for(i = 0; i < dropdowns.length; i++) { 
     var openDropdown = dropdowns[i]; 
     if(openDropdown.classList.contains('show')) { 
     openDropdown.classList.remove('show'); 
     } 
    } 
    } 
    if(!event.target.matches('.dropbtnpm')) { 
    var dropdowns = document.getElementsByClassName("dropdown-content"); 
    var i; 
    for(i = 0; i < dropdowns.length; i++) { 
     var openDropdown = dropdowns[i]; 
     //if (openDropdown.classList.contains('show')) { 
     openDropdown.classList.remove('show'); 
    } 
    } 
} 

私のHTMLです。私はちょうどそれが 'テスト'のテキストで動作するようにしようとしています。私は後で

<td><button onmouseover="myFunction();" 
onclick="location.href='property-mngt.html';" value="Property Management" 
class="dropbtn">PROPERTY MANAGEMENT</button> 
<div id="pmd" class="dropdown-content"> test </div> 
</td> 

CSSが

.dropbtn { 
    border: none; 
    padding: 16px; 
    cursor: pointer; 
    background-color: #ffffff; 
    color: black; 
    height: 125px; 
    min-height: 125px; 
    font-size: 12px; 
} 
.dropbtn:hover, .dropbtn:focus { 
    background-color: #004b8d; 
    color: white; 
    font-size: 12px; 
} 
.dropdown { 
    position: relative; 
    color: #ffff33; 
} 
.dropdown-content { 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    display: none; 
} 
.dropdown-content a { 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
    color: white; 
} 
.dropdown a:hover { 
    background-color: #f1f1f1; 
    color: black; 
} 
.show { 
    border: 1px solid #33ccff; 
    display: block; 
    visibility: visible; 
    background-color: #004b8d; 
    color: white; 
    font-family: Arial,Helvetica,sans-serif; 
    font-size: small; 
} 
.dropdown-content a:hover { 
    background-color: #f1f1f1; 
    color: black; 
} 

私の目標は、その特定のメニュー項目の上にマウスを移動する場合、ドロップダウンリストが表示されていすることにあるリンクを行うことができます。 htmlを<div id="pmd" class="dropdown-content.show"> test </div>に変更すると、メニューに 'test'と表示されます。

ドロップダウンを表示するには、そのメニュー項目のマウスオーバーを取得することに固執しています。

Answer 1

複数の要素を表示しようとしています。最初のものを取り出して正しく表示してください。

document.getElementsByClassName('dropdown-content')[0].style.display = 'block' 

または使用のJavaScriptコードが完了していないようですdocument.querySelector('dropdown-content')