CODEWITHSUNDEEP
javascripthtmlfunctionparametersprompt
Zaka_dev
Zaka_dev

Reputation: 55

Why the function is not read when I call it?

I'm French (sorry for my English) new in the web development even more in Javascript..

I created a function named "manyStyles".

This function have to grab an element with querySelector(""), then apply some style to the element grabbed before. It's a really simple function,just to trial and learn.

The logical of the script is :

-I created 4 variables with function prompt("") inside them; => The value of the user is stocked in those 4 variables.

let askForElement= prompt("Type some selectors, with CSS synthax.. example:h1,h2.. #test(id) or .test(class)");
let askingHeight= prompt("Type some value for the height");
let askingWidth= prompt("Type some value for the width");
let askingBackgroundColor= prompt("Type some value for the background-color ex:red,green,blue, #66a ..");

-I declare my function manyStyles with 4 parameters(variables) inside the parentheses (elementGrab,elem_height,elem_width,element_bg_color) => elementGrab is used to catch the element like I explained before and the others parameters is variables for style.

function manyStyles(elementGrab,elem_height,elem_width,element_bg_color){
    let grabbedElement;
    grabbedElement=document.body.querySelector(`${elementGrab}`);
    document.body.grabbedElement.style=`height:${elem_height}px;width:${elem_width}px;background-color:${element_bg_color};`;
}

=>Inside the body function I just create a variable named "grabbedElement" to store inside it the element when is going to be grabbed just the in the statement following.

At the end I call the function with her name and in the parameters I put the 4 variables prompt (that created in the first step);

manyStyles(askForElement,askingHeight,askingWidth,askingBackgroundColor);

Normally the function have to grab element with querySelcetor and then apply to it the styles.

But for some reason is doesn't work

Look at the complete code is more explaining ..

Thank You

let askForElement= prompt("Type some selectors, with CSS synthax.. example:h1,h2.. #test(id) or .test(class)");
let askingHeight= prompt("Type some value for the height");
let askingWidth= prompt("Type some value for the width");
let askingBackgroundColor= prompt("Type some value for the background-color ex:red,green,blue, #66a ..");


function manyStyles(elementGrab,elem_height,elem_width,element_bg_color){
    let grabbedElement;
    grabbedElement=document.body.querySelector(`${elementGrab}`);
    document.body.grabbedElement.style=`height:${elem_height}px;width:${elem_width}px;background-color:${element_bg_color};`;
}

manyStyles(askForElement,askingHeight,askingWidth,askingBackgroundColor);

Upvotes: 2

Views: 98

Answers (2)

jasper
jasper

Reputation: 945

On first look what you are doing is create a variable, but then you don't use this variable to set style. document.body.grabbedElement equals to undefined.

function manyStyles(elementGrab,elem_height,elem_width,element_bg_color){
   let grabbedElement=document.body.querySelector(`${elementGrab}`);
   grabbedElement.style=`height:${elem_height}px;width:${elem_width}px;background-color:${element_bg_color};`;
}

Upvotes: 0

Evgeny Klimenchenko
Evgeny Klimenchenko

Reputation: 1194

You created a variable inside with let grabbedElement you assigned it the grabbed element but then you have not used it. It should be like this, where you change grabbed element.

grabbedElement.style=`height:${elem_height}px;width:${elem_width}px;background-color:${element_bg_color};`;

You trying to get styles from document.body.grabbedElement but document.body.grabbedElement doesn't exist there.

Upvotes: 1

Related Questions