Изменение размера шрифта и цвета текста элемента с помощью функций со стрелками и addEventListener - PullRequest
Новая
       3

Изменение размера шрифта и цвета текста элемента с помощью функций со стрелками и addEventListener

1 голос
/ 25 января 2020

Я хочу изменить цвет и размер текста в элементе 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);
});

1 Ответ

0 голосов
/ 26 января 2020

У вас есть переменные 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);
})
...