时间戳

首页 > 解决方案 > 我如何获得一个按钮来调用删除文本并用网格中的新文本替换它的 JS 脚本？

javascript - 我如何获得一个按钮来调用删除文本并用网格中的新文本替换它的 JS 脚本？

问题描述

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

我有一个看起来像这样的网格“顶部顶部”“菜单底部图片”

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

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

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-->

标签： javascriptcss

解决方案

让它与这段代码一起工作：

     <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";
}

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

推荐阅读