I am making some style buttons using javascript but they are not working

Issue

I’m making some style buttons using javascript but they are not working.

I have been struggled with this several hours.

Here is my code:

Html:

<textarea><textarea>
<button onclick = "size('fontSize','10px',0)">Small</button>
<button onclick = "size('fontSize','20px',1)">Medium</button>
<button onclick = "size('fontSize','30px',2)">Large</button>
<button onclick = "size('fontSize','40px',3)">Extra Large</button>

JavaScript:

function size(stys,sizes,i){
                let buttons = document.getElementsByTagName('button')
                document.querySelector('textarea').style.stys = sizes;
                console.log(document.querySelector('textarea').style.stys)
                for(let y = 0;y<buttons.length;y++){
                   buttons[y].style.textDecoration = 'none'
                }   
                 buttons[i].style.textDecoration = 'underline'
            }

I’m not sure why, but the font size doesn’t style to the textarea even though the console.log return the font size i want to style to.

Thanks for anyone’s help.

Solution

Change .style.stys to .style[stys]:

function size(stys,sizes,i){
    let buttons = document.getElementsByTagName('button')
    document.querySelector('textarea').style[stys] = sizes;
    console.log(document.querySelector('textarea').style[stys])
    for(let y = 0;y<buttons.length;y++){
       buttons[y].style.textDecoration = 'none'
    }   
     buttons[i].style.textDecoration = 'underline'
}

<textarea></textarea>
<button onclick = "size('fontSize','10px',0)">Small</button>
<button onclick = "size('fontSize','20px',1)">Medium</button>
<button onclick = "size('fontSize','30px',2)">Large</button>
<button onclick = "size('fontSize','40px',3)">Extra Large</button>

Answered By – Nikola Pavicevic

Answer Checked By – Timothy Miller (AngularFixing Admin)