如何获得一个按钮来调用删除文本并将其替换为网格中的新文本的 JS 脚本?

Question

我是编码新手，我正在做一个学校项目，我们应该使用网格制作一个网站。

我有一个看起来像这个"顶部顶部"的网格 "菜单底部图片">

在菜单侧，我想使用不同汽车品牌的按钮。 在"底部"网格中，我想获得一些有关打开网站时弹出的网站功能的信息。 当您单击汽车品牌时，我希望该功能删除"底部"中的文本并将其替换为有关汽车品牌的事实，同时在"图片"网格中放置一张或多张图片。

截至目前，我的代码如下所示;

function myFunction() {
var x = document.querySelector(".myDIV");
if (x.innerHTML == "Hello") {
x.innerHTML = "Masse info om bmw!";
} else {
x.innerHTML = "Hello";
}
}

<div class="beholder">
<div class="topp">
topp
</div> <!-- topp-->
<div class="meny">
<p><button onclick="myFunction()">BMW</button></p>
</div><!-- meny-->
<div class="myDIV">Hello</div>
<div class="bunn">
bunn
<p>Her kan du finne ut forskjellig informasjon om forskjellige bilmerker.
</p>
<p>Man kan blant annet finne ut hvor de forskjellige bilmerkene blir produsert,</p>
<p>hvor populære de er, hvilke motorer som brukes samt annen nyttig informasjon.</p>
</div><!-- bunn-->
<div class="bilder">
bilder
</div><!--bilder-->
</div><!--beholder-->

Answer 1

让它使用以下代码：

<div class="beholder">
<div class="topp">
topp
</div><!-- topp-->

<div class="meny">
<p><button id="bmw">BMW</button></p>  
</div><!-- meny-->
<div id="myDIV">Hello</div>
<div class="bunn">
bunn

<p>Her kan du finne ut forskjellig informasjon om forskjellige 
bilmerker.</p>
<p>Man kan blant annet finne ut hvor de forskjellige bilmerkene 
blir produsert,</p>
<p>hvor populære de er, hvilke motorer som brukes samt annen 
nyttig informasjon.</p>

</div><!-- bunn-->
<div class="bilder">
bilder
</div><!--bilder-->
</div><!--beholder-->
<script>
window.onload = function() { 
var btn = document.getElementById("bmw");
btn.addEventListener("click", myFunction);
function myFunction() {
var x = document.getElementById("myDIV");
if (x.innerHTML === "Hello") {
x.innerHTML = "Masse info om bmw!";
} else {
x.innerHTML = "3";
}
} 
}
</script>

我做了一些更改并使用了事件侦听器，而不是 onclick 事件。

此外，我使用了getElementByID而不是查询选择器。

从理论上讲，您可以使用三元条件运算符缩短 if 条件

function myFunction() {
var x = document.getElementById("myDIV");
x.innerHTML = x.innerHTML === "Hello" ? "Masse info om bmw!" : "3";
} 

但主要错误应该是未关闭脚本标记。