使用 Javascript 根据按下的按钮更改 div 的文本

Question

我确信这比我想象的要容易，但是 - 我需要根据按下的按钮来更改段落。我想使用与我单击的按钮相同的按钮来更改 main-img。

重申一下，我的目标是：如果我单击一个按钮，例如，Executioner，我希望图像更改为刽子手图像（就像我已经设置的那样），并将 subclassDesc 更改为我需要的适当的子类信息.

这是 HTML（我不认为主箱信息与这个问题超级相关，所以如果你愿意的话请忽略它 - 我只需要知道如何正确更改所述信息。）

    <div id="imgContain">
        <img id="main-img" src="default.png">
    </div>
    <div id="mainBox">
        <div class="tabMain">
            <button class="tablinks active" onclick="mainTab(event, 'Overview')" id="defaultOpen">Overview</button>
            <button class="tablinks" onclick="mainTab(event, 'Subclasses')">Subclasses</button>
            <button class="tablinks" onclick="mainTab(event, 'Spells')">Spells</button>
        </div>

        <div id="Overview" class="tabcontentMain">
            <h3>Overview</h3>
            <p>blablabla.</p>
            <p id="subclassDesc">
                <h3>Insert Subclass Here</h3>
                insert subclass info here
            </p>    
        </div>
        <div id="Subclasses" class="tabcontentMain">
            <h3>Subclasses</h3>
            <p>
                <button id="subclass" onclick="changeImg('./assets/010.-Arbalest.png')">Arbalest</button>
                <br><br>
                <button id="subclass" onclick="changeImg('./assets/011.-Dreadnaught.png')">Dreadnought</button>
                <br><br>
                <button id="subclass" onclick="changeImg('./assets/012.-Executioner.png')">Executioner</button>
                <br><br>
                <button id="subclass" onclick="changeImg('./assets/013.-Lancer.png')">Lancer</button>
                <br><br>
                <button id="subclass" onclick="changeImg('./assets/014.-Titan.png')">Titan</button>
            </p>
        </div>

这是Javascript

function changeImg(uri) {
    var image = document.getElementById('main-img');

    image.src = uri;
}

function insertTxt() {
    const button = document.getElementById('subclass');
    const p = document.getElementById('subclassDesc');

//what do i do here? Do i even need this?//
}

我只需要答案，我对 Javascript 很陌生，并没有真正完全理解一切。我什至不知道该功能要做什么。 我需要 if else 语句吗？如何在具有不同参数的同一函数上完成所有这些操作？

Answer 1

从你的问题来看，并不完全清楚你想从哪里获取子类信息，所以这里有一些我的即兴创作。 我希望它有帮助。

const info = {
  'Arbalest': 'Arbalest is awesome',
  'Dreadnought': 'Dreadnought is awesome',
  'Executioner': 'Executioner is awesome',
  'Lancer': 'Lancer is awesome',
  'Titan': 'Titan is awesome',
};

function selectSubclass(button, uri) {
  var image = document.getElementById('main-img');
  image.src = uri;

  const p = document.getElementById('subclassDesc');
  const subclassName = button.innerText;
  p.innerHTML = `<h3>${subclassName}</h3>${info[subclassName]}`;
}

<div id="imgContain">
  <img id="main-img" src="default.png">
</div>
<div id="mainBox">
  <div class="tabMain">
    <button class="tablinks active" onclick="mainTab(event, 'Overview')" id="defaultOpen">Overview</button>
    <button class="tablinks" onclick="mainTab(event, 'Subclasses')">Subclasses</button>
    <button class="tablinks" onclick="mainTab(event, 'Spells')">Spells</button>
  </div>

  <div id="Overview" class="tabcontentMain">
    <h3>Overview</h3>
    <p>blablabla.</p>
    <p id="subclassDesc">
      <h3>Insert Subclass Here</h3>
      insert subclass info here
    </p>
  </div>
  <div id="Subclasses" class="tabcontentMain">
    <h3>Subclasses</h3>
    <p>
      <button id="subclass" onclick="selectSubclass(this, './assets/010.-Arbalest.png')">Arbalest</button>
      <br><br>
      <button id="subclass" onclick="selectSubclass(this, './assets/011.-Dreadnaught.png')">Dreadnought</button>
      <br><br>
      <button id="subclass" onclick="selectSubclass(this, './assets/012.-Executioner.png')">Executioner</button>
      <br><br>
      <button id="subclass" onclick="selectSubclass(this, './assets/013.-Lancer.png')">Lancer</button>
      <br><br>
      <button id="subclass" onclick="selectSubclass(this, './assets/014.-Titan.png')">Titan</button>
    </p>
  </div>