时间戳

首页 > 解决方案 > 如何使用 addEventListener 改变 HTML 布局？

javascript - 如何使用 addEventListener 改变 HTML 布局？

问题描述

我目前正在尝试在单击 HTML page1 时使用 EventListenerstyle.display将图像从page2 切换none到blockpage2，这可能吗？

这是EventListener收听的 HTML。

<link rel="stylesheet" href="../public/styles/style.css">
<script src="../public/scripts/selection.js"></script>

  <form action = "/search" method = "POST" id="submitMessage" class="field has-addons">
            <select name ="species">
              <option value="" disabled selected>--Please Select a Species--</option>
              <option class = "dog" value="Dog">Dog</option>
              <option class = "cat" value="Cat">Cat</option>
            </select>
  </form>

这是应该更改的 JavaScript style.display：

const selection = () => {
  const dog = document.querySelector('.dog');
  const cat = document.querySelector('.cat');
  
  dog.addEventListener('click', () => {
      dogPic.style.display = block;
    });

 cat.addEventListener('click', () => {
      catPic.style.display = block;
    });
}

selection();

这是CSS：

    .dog{
  
     }

    .cat{
  
     }

    .dogPic{
  display: none;
     }

.catPic{
  display: none;
    }

这是第二个 HTML，其中图片应根据单击的选项而更改。

<link rel="stylesheet" href="../public/styles/style.css">

      <div class="dogPic">
        <img src="../public/images/dogSpecies.png" style="max-height: 130px;">
      </div>
      <div class="catPic">
        <img src="../public/images/catSpecies.png" style="max-height: 130px;">
      </div>

我没有将 JavaScript 放在第二个 HTML 上。

我在 Node.js 中执行此操作，但 JavaScript 是没有任何 Node.js 函数的普通 JavaScript。这应该工作吗？或者这是不可能的？

[![This is the directory structure, index.ejs is where the select option is, species.ejs is where I want the picture to change according to what option is clicked on][1]][1]

标签： javascripthtmlcssnode.js

解决方案

我不知道您如何为您的项目服务，所以我猜测并尝试了。

我的项目结构：

html/index.html
public
 ├ styles/style.css (empty)
 └ scripts/selection.js

我用它来服务

npx http-server .

所以我可以浏览到http://127.0.0.1:8080。

html/index.html与您的非常相似，但该script元素已移至该form元素下方。

<link rel="stylesheet" href="../public/styles/style.css">

<form action = "/search" method = "POST" id="submitMessage" class="field has-addons">
  <select name ="species">
    <option value="" disabled selected>--Please Select a Species--</option>
    <option class = "dog" value="Dog">Dog</option>
    <option class = "cat" value="Cat">Cat</option>
  </select>
</form>

<script src="../public/scripts/selection.js"></script>

<div class="dogPic">
  <img src="../public/images/dogSpecies.png" style="max-height: 130px;">
</div>
<div class="catPic">
  <img src="../public/images/catSpecies.png" style="max-height: 130px;">
</div>

public/scripts/selection.js是：

const selection = () => {
  const dog = document.querySelector('.dog');
  const cat = document.querySelector('.cat');

  dog.addEventListener('click', () => {
    let dogPic = document.querySelector('.dogPic');
    let catPic = document.querySelector('.catPic');
    dogPic.style.display = 'block';
    catPic.style.display = 'none';
  });
    
  cat.addEventListener('click', () => {
    let dogPic = document.querySelector('.dogPic');
    let catPic = document.querySelector('.catPic');
    dogPic.style.display = 'none';
    catPic.style.display = 'block';
  });
}   

selection();

事件侦听器范围之外的变量是不可访问的，因此您必须在其中分配 DOM 元素。（请注意，dogPicandcatPic不是 CSS 元素（我的 CSS 是空的），而是div元素。）然后您可以以编程方式更改其style.

许多框架都支持像使用 CSS 一样使用 Javascript 对象，但是，您不能将纯 CSS 视为 Javascript 变量。

推荐阅读