my selector is not returning a value

why when i select a value it doesn't return anything even though i did what i supposed to do

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/test.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:[email protected]&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
</head>
<body>
    <select name="" id="fontSizes">
        
    </select>
<script src="/test.js"></script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/test.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:[email protected]&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
</head>
<body>
    <select name="" id="fontSizes">
        
    </select>
<script src="/test.js"></script>
</body>
</html>

function fontSizesFunc() {
    let myFontSizes = document.querySelector("#fontSizes")
  for (let i = 16; i <= 32; i++) {
    let divCreation = document.createElement("option");
    divCreation.textContent = `${i}px`
    divCreation.value = `${i}px`
    myFontSizes.append(divCreation)
}
document.body.style.fontSize = (myFontSizes.onInput = () => myFontSizes.value)
}

fontSizesFunc()

function fontSizesFunc() {
    let myFontSizes = document.querySelector("#fontSizes")
  for (let i = 16; i <= 32; i++) {
    let divCreation = document.createElement("option");
    divCreation.textContent = `${i}px`
    divCreation.value = `${i}px`
    myFontSizes.append(divCreation)
}
document.body.style.fontSize = (myFontSizes.onInput = () => myFontSizes.value)
}

fontSizesFunc()

18 Replies

lko•5mo ago

I'm not sure you can do this

document.body.style.fontSize = (myFontSizes.onInput = () => myFontSizes.value)
}

document.body.style.fontSize = (myFontSizes.onInput = () => myFontSizes.value)
}

You should do the opposite

 myFontSizes.addEventListener("change", (e) => {
   document.body.style.fontSize = (e.target.value)
 })

 myFontSizes.addEventListener("change", (e) => {
   document.body.style.fontSize = (e.target.value)
 })

محمدOP•5mo ago

wait this might be the solution let me try it oh it actually worked thank you

lko•5mo ago

محمدOP•5mo ago

but i have a question what if instead of using addEvent listener i used onChange would that work too or not

lko•5mo ago

Yeah but use addEventListener

محمدOP•5mo ago

@lko why it is better

lko•5mo ago

https://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick

Stack Overflow

addEventListener vs onclick

What's the difference between addEventListener and onclick? var h = document.getElementById("a"); h.onclick = dothing1; h.addEventListener("click", dothing2); The code above re...

محمدOP•5mo ago

@lko yeah that's true but the problem is addEvenetListener doesn't return a value someone told me this before

lko•5mo ago

I dont think onClick or onInput returns something as well Also i dont see why yo uneed to return something inside a listener

محمدOP•5mo ago

i want to assign its value in a variable

lko•5mo ago

 myFontSizes.addEventListener("change", (e) => {
variable = newValue
 })

 myFontSizes.addEventListener("change", (e) => {
variable = newValue
 })

محمدOP•5mo ago

no i mean like this

 myFontSizes.addEventListener("change", (e) => {
variable = myFontSizes.value
 })

 myFontSizes.addEventListener("change", (e) => {
variable = myFontSizes.value
 })

@lko this won't work right

lko•5mo ago

why not That's exactly what we just did

محمدOP•5mo ago

what lemme try

lko•5mo ago

myFontSizes.addEventListener("change", (e) => {
   document.body.style.fontSize = (e.target.value)
 })

myFontSizes.addEventListener("change", (e) => {
   document.body.style.fontSize = (e.target.value)
 })

محمدOP•5mo ago

yeah but this is different

lko•5mo ago

and e.target is myFontSizes

محمدOP•5mo ago

oh i can see

Gaming

Programming

my selector is not returning a value