56264


<http://uu-hokkaido.cedars.jp/renewal.shtml>

こちらのサイトのメインビジュアルで、北海道の地図の上の札幌の上のピンクの丸をクリックすると、

・地図の左右にある８つの要素の変更。(これはできました。)  
・北海道人気観光８エリアの文字を変更（これも変更したいです。）

をしたいです。

札幌の上のピンクの丸に、  
onclick="show('sapporo')を入れて、

上記２つにclass="sapporo"にすると、  
１つしか変更されませんでした。

試しに  
・地図の左右にある８つの要素 class="sapporo"  
・北海道人気観光８エリアの文字 class="sapporo2" と分けて、

札幌の上のピンクの丸に、  
onclick="show('sapporo','sapporo2')などいれると無効になりました。

札幌の上のピンクの丸をクリックすると、

・地図の左右にある８つの要素の変更。(これはできました。)  
・北海道人気観光８エリアの文字を変更（これも変更したいです。）

これを２つ同時に変更したいのですが、わかる方ご教授お願い致します。


CC BY-SA 4.0
2019-06-30T11:21:14.850
56263
2019-06-30T11:49:45.683
34913
question
javascript html css
クリックして、２つの要素を同時に変更したい。


`show` 関数にはどの要素を表示したいのかが引数として渡されるため、その値が札幌だった場合にのみ見出しのテキスト内容を `textContent`
プロパティを用いて変更すれば良いと思います。

[code]

    function show(course) {
      document
        .querySelectorAll(".container_mainvisual > div[id]")
        .forEach(e => (e.style.visibility = "hidden"));
      document.getElementById(course).style.visibility = "visible";
    
      if (course === "sapporo") {
        document.querySelector(".hokkaido_guide").textContent = "札幌・小樽完全観光ガイド";
      }
    }
    
[/code]


CC BY-SA 4.0
2019-06-30T11:49:45.683
56264
2019-06-30T11:49:45.683
32986
56263
answer