JavaScript - How do I place a DOM element into a variable the variable in later functions?-CodePudding

I am trying to turn rectangle.style.width = "100px"; into a variable using parseInt so that I can place that variable into two buttons so I can either increase the width of my rectangle or decrease it. However I cant seem to get the information into the variable no matter what I do.

My two functions are very similar with the only diffrence being that one subtracts and the other adds.

//does not work as supposed to
function shrinkBtn() {
myWidth= myWidth - 10   "px";

//works but does not have the element as a variable

function shrinkBtn() {
rectangle.style.width = parseInt(rectangle.style.width)- 10  "px";
}

I would have thought that this would have been super simple but I havent had any luck with any of answers I have found from previous posts or google searches.

I have tried a couple diffrent things when facing this issue. I have tried

var myWidth = rectangle.style.width;
var myWidth = parseInt(rectangle.style.width);

I do get a output when I place it in a console log such as console.log(myWidth) however it doesnt seem to work when I try to put it in my other functions. I was expecting to be able to store the information into the variable and then place it in my function such as

function  shrinkBtn() {

  myWidth = parseInt(myWidth) -10   "px"; 
}

function  shrinkBtn() {

  myWidth = myWidth - 10   "px"; 
}

EDIT: added full code

rectangle.style.width = "100px";
// rectangle.style.width = parseInt(rectangle.style.width)  10  "px";
var myWidth = parseInt(rectangle.style.width);
console.log(myWidth);

decreaseBtn.addEventListener("click", shrinkBtn);

increaseBtn.addEventListener("click", growBtn);

function  shrinkBtn() {
//using the variable here does not trigger the function
  myWidth = parseInt(myWidth) -10   "px"; 
    
//using this style below does trigger the function
  // rectangle.style.width = parseInt(rectangle.style.width)- 10  "px";
    
}


function growBtn() {
    //Original function without the variable to show comparison This works 
    rectangle.style.width = parseInt(rectangle.style.width)  10  "px";
}

CodePudding user response：

we don't have a full snippet so not so easy to answer!

Local variable problem (local, global, rewrite)? Like in your function myWidth= myWidth - 10 "px";... myWidth???

Element not selected???

You were not far by the way...

document.querySelector('#shrink').addEventListener('click', function() {
  const rectangle = document.querySelector('#rectangle');
  rectangle.style.width = parseInt(rectangle.style.width) - 10   "px";
})

document.querySelector('#increase').addEventListener('click', function() {
  const rectangle = document.querySelector('#rectangle');
  rectangle.style.width = parseInt(rectangle.style.width)   10   "px";
})

<div id="rectangle" style="width: 100px; height: 100px; background-color: red;"></div>
<button id="shrink">-</button>
<button id="increase"> </button>

I've put 2 functions for better understanding. It could be simplified.

CodePudding user response：

The OP might have a look into a function's bind method.

Thus as for the next provided example one does not register handler functions which each do query the specific element each time the handler gets invoked, but one does create and register two handler functions where the element is bound as the created function's this context (the OP should think in terms of two methods which do operate each on the bound object).

function decreaseWidthOfBoundElement() {
  this.style.width = parseInt(this.style.width, 10) - 10   "px";
}
function increaseWidthOfBoundElement() {
  this.style.width = parseInt(this.style.width, 10)   10   "px";
}

function main() {
  const elmNode = document.querySelector('#rectangle');

  document
    .querySelector('#shrink')
    .addEventListener(
      'click', decreaseWidthOfBoundElement.bind(elmNode)
    );
  document
    .querySelector('#increase')
    .addEventListener(
      'click', increaseWidthOfBoundElement.bind(elmNode)
    );
}

main();

<div id="rectangle" style="width: 100px; height: 100px; background-color: red;"></div>

<button id="shrink">-</button>
<button id="increase"> </button>