我想在单击按钮时更改h1元素内文本的颜色和大小。值（颜色，字体大小）是输入值。我不知道我在哪里弄错了，但是以下代码无法正常工作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Advanced functions</title>
</head>
<body>
<h1 id = "text">Change me, please!</h1>
<label>Text size</label>
<input type = "number" id = "textSize"><br>
<label>Text color</label>
<input type = "color" id = "textColor"><br>
<input type = "button" id = "btn" value = "Submit">
<script src = "exercise2.js"></script>
</body>
</html>
我想使用箭头函数，该函数将在eventListener中调用。
let fontSelect = document.querySelector('#textSize').value;
let colorSelect = document.querySelector('#textColor').value;
let elementSelect = document.querySelector('#text');
let btn = document.querySelector("#btn");
let addSize = (element, fontSize) => element.style.fontSize = `${fontSize}px`;
let addColor = (element, color) => element.style.color = color;
btn.addEventListener("click", () => {
addColor(elementSelect, colorSelect);
addSize(elementSelect, fontSelect);
});
您有一个fontSelect和colorSelect变量，它们已初始化为各个标签的实际值，但是它们从未改变。您需要执行以下操作：
let fontSelect = document.querySelector('#textSize');
let colorSelect = document.querySelector('#textColor');
let elementSelect = document.querySelector('#text');
let btn = document.querySelector("#btn");
let addSize = (element, fontSize) => element.style.fontSize = `${fontSize}px`;
let addColor = (element, color) => element.style.color = color;
btn.addEventListener("click", () => {
addColor(elementSelect, colorSelect.value);
addSize(elementSelect, fontSelect.value);
})
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句