如何使用addEventListener改变HTML布局?

Question

我目前正在尝试使用EventListener点击HTML page1来切换style.display的图像从none到block在page2上，这是可能的吗?

这是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是正常的JavaScript，没有任何Node.js函数。这应该起作用吗?或者这是不可能的?

[![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]

Answer 1

code.js

const express = require('express')
const app = express()
const port = 3000
app.set('view engine', 'ejs'); 
app.use(express.static(__dirname + '/public'));
app.use(express.urlencoded({extended: true}))
app.get('/', (req, res) => {
res.sendFile(__dirname + '/public/index.html')
})
app.post('/search', (req, res) => {
res.render('species.ejs', {species: req.body.species})
})
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})

public/index.html

<form action="/search" method="POST" id="submitMessage">
<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="scripts/selection.js"></script>

public/scripts/selection.js

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

dog.addEventListener('click', () => {
document.getElementById('submitMessage').submit();
}); 
cat.addEventListener('click', () => {
document.getElementById('submitMessage').submit();
}); 
}
selection();

从public/index.html(可能是http://localhost:3000/)，您向(可能)http://localhost:3000/search发出表单请求。

字符串'Dog'或'Cat'作为变量species传递。然后，您可以根据变量定义styles来动态地render您的页面views/species.ejs。

views/species.ejs

<div style="display: <%= species === 'Dog' ? 'block' : 'none' %>">
<img src="../public/images/dogSpecies.png" style="max-height: 130px;">
</div>
<div style="display: <%= species === 'Cat' ? 'block' : 'none' %>">
<img src="../public/images/catSpecies.png" style="max-height: 130px;">
</div>

我不知道你到底想做什么，但是，由于Express是一个后端框架，动态页面呈现与其他前端框架相比并不那么合适。

Answer 2

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

我的项目结构:

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.jsis:

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元素。(注意dogPic和catPic不是CSS元素(我的CSS是空的)，而是div元素。)然后，您可以通过编程方式更改其style。

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