使用javascript通过<input type="image“src=>更改段落

Question

我正在制作一个关于一级方程式的登陆页，现在我遇到了一个问题。问题是，当我点击一个特定的团队的标志，椭圆颜色和团队图片本身就会发生完美的变化。但我也希望左侧球队的段落/信息也能改变。我也搞不懂JavaScript的意思。

​

function imgslider(anything) {
  document.querySelector('.formula').src = anything;
}

function changeCircleColor(color) {
  const ellipse = document.querySelector('.ellipse');
  ellipse.style.background = color;
}

var p = document.getElementById('williams_para');
var btn = document.getElementById('input type=image');
var txt = document.getElementById('williams')

<link href="https://fonts.googleapis.com/css2?family=Recursive&display=swap" rel="stylesheet">
<section>
  <div class="ellipse"></div>
  <header>
    <a href="#"> <img src="../PROJECT-4/img/logo.png" class="logo"></a>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="index4-contact.html">Contacts</a></li>
    </ul>
  </header>
  <div class="content">
    <div class="textbox_ferrari">
      <h2 id="ferrari_head">Scuderia Ferrari</h2>
      <p id="ferrari_para">Scuderia Ferrari is the most successful Formula One Team, having bagged 283 wins, 16 Constructors' titles and 15 Driver Championships over the 91 years since it was first established. Created by Enzo Ferrari himself, the team is the oldest and most
        successful Formula 1 team in history. The Italian team has won the Constructors’ Championship 16 times and the Drivers’ Championship 15 times. <br>
        <br> The current 2022 drivers are Charles Leclerc (left) and Carlos Sainz (right).</p>
    </div>
    <div class="textbox_ar">
      <h2 id="williams_head">Williams Racing</h2>
      <p id="williams_para">The Williams Formula 1 team was founded by racing enthusiast Frank Williams back in 1977. Frank managed to turn Williams into one of the most successful Formula 1 teams in history, winning 9 Constructors’ Titles and 7 Drivers’ Titles. When Williams
        entered Formula 1, they did so with the intention to fight their way to the top. This makes Williams one of the most decorated teams in the history of the sport. It is technically more successful than even Red Bull and Mercedes. When Nigell Mansell
        returned in 1991 the following year Williams dominated with the FW14B, which pioneered technology such as active suspension. <br>
        <br> The current 2022 drivers are Nicolas Latifi (left) and Alex Albon (right).</p>
    </div>
    <div class="imgbox">
      <img src="../PROJECT-4/img/ferrari_team.png" class="formula">
    </div>
  </div>
  <div>
    <ul class="thumb">
      <input type="image" src="img/at.png" id="at_thumb" onclick="imgslider('../PROJECT-4/img/at_team.png');changeCircleColor('#1c2136')" />
      <input type="image" src="img/ar.png" id="ar_thumb" onclick="imgslider('../PROJECT-4/img/ar_team1.png');changeCircleColor('#832522')" />
      <input type="image" src="img/ferrari.png" id="ferrari_thumb" onclick="imgslider('../PROJECT-4/img/ferrari_team.png');changeCircleColor('#f31c1cd5')" />
      <input type="image" src="img/am.png" id="am_thumb" onclick="imgslider('../PROJECT-4/img/am_team.png');changeCircleColor('#06646e')" />
      <input type="image" src="img/merc.png" id="merc_thumb" onclick="imgslider('../PROJECT-4/img/merc_team.png');changeCircleColor('#50b8c0')" />
      <input type="image" src="img/williams.png" id="williams_thumb" onclick="imgslider('../PROJECT-4/img/williams_team.png');changeCircleColor('#222836')" />
      <input type="image" src="img/mcl.png" id="mcl_thumb" onclick="imgslider('../PROJECT-4/img/mcl_team.png');changeCircleColor('#ff9801')" />
      <input type="image" src="img/haas.png" id="haas_thumb" onclick="imgslider('../PROJECT-4/img/haas_team.png');changeCircleColor('#ee1d23')" />
      <input type="image" src="img/rb.png" id="rb_thumb" onclick="imgslider('../PROJECT-4/img/rb_team.png');changeCircleColor('#2f3c64')" />
      <input type="image" src="img/alpine.png" id="alpine.png_thumb" onclick="imgslider('../PROJECT-4/img/alpine_team.png');changeCircleColor('#114fa4')" />
    </ul>
  </div>
</section>

​

Answer 1

您可以添加额外的功能。请参阅下面的示例

<input type="image" src="img/at.png" id="at_thumb" onclick="imgslider('../PROJECT-4/img/at_team.png');changeCircleColor('#1c2136');changeParaDisplay("textbox_ar")"/>

然后用脚本编写函数

function changeParaDisplay(className){document.querySelector('.className').display = "block"; }

默认情况下，您可以将其他所有内容都作为display: none