CODEWITHSUNDEEP
javascripthtml
user14563827
user14563827

Reputation:

Javascript get object value on button click

I have just started to learn javascript today and I have multiple button's with the same class name and I'm trying to get a objects values depending on button click than pass object values as a parameter but i can't seem to work on how to get the object when button is clicked.

If someone can help or point me in the right direction i would really appreciate your help.

For example if button with value object1 / button 1 is clicked get and pass the object as parameter from object1 to function build.

const object1 = [
  { x: 96, y: 0, type: 'type1', yaw: 0 },
  { x: 192, y: 0, type: 'type1', yaw: 0 }]

const object2 = [
  { x: 96, y: 0, type: 'type2', yaw: 0 },
  { x: 192, y: 0, type: 'type2', yaw: 0 }]

const base_buttons = document.querySelectorAll(".base_build");
base_buttons.forEach(buttons => {
  buttons.addEventListener('click', (e) => {
    build() // pass object here as parameter here!
  });
})

const build = (builds) => {
  console.log(builds);
}
<button value="object1" class="btn btn-red base_build" style="width: 45%;">BUTTON 1</button> &nbsp;
<button value="object2" class="btn btn-red base_build" style="width: 45%;">BUTTON 2</button>

Sorry if my english is not good

Upvotes: 1

Views: 1279

Answers (3)

Shahnawaz Alam
Shahnawaz Alam

Reputation: 1

const object1 = [
  { x: 96, y: 0, type: 'type1', yaw: 0 },
  { x: 192, y: 0, type: 'type1', yaw: 0 }]

const object2 = [
  { x: 96, y: 0, type: 'type2', yaw: 0 },
  { x: 192, y: 0, type: 'type2', yaw: 0 }]



const getValues = (builds) => {
  console.log(builds);
}
<button class="btn btn-red base_build" onclick=getValues(object1) style="width: 45%;">BUTTON 1</button> &nbsp;
<button class="btn btn-red base_build" onclick=getValues(object2) style="width: 45%;">BUTTON 2</button>

Upvotes: 0

Sarun UK
Sarun UK

Reputation: 6736

const object1 = [
  { x: 96, y: 0, type: 'type1', yaw: 0 },
  { x: 192, y: 0, type: 'type1', yaw: 0 }]

const object2 = [
  { x: 96, y: 0, type: 'type2', yaw: 0 },
  { x: 192, y: 0, type: 'type2', yaw: 0 }]
  
const objArray = [object1, object2]
const base_buttons = document.querySelectorAll(".base_build");

for (let i = 0; i < base_buttons.length; i++) {
    base_buttons[i].addEventListener('click', e => {
    build(objArray[i]) // pass object here as parameter here!
  });
}

const build = (builds) => {
  console.log(builds);
}
<button value="object1" class="btn btn-red base_build" style="width: 45%;">BUTTON 1</button> &nbsp;
<button value="object2" class="btn btn-red base_build" style="width: 45%;">BUTTON 2</button>

Upvotes: 0

Greedo
Greedo

Reputation: 3549

You can create a map objects with your data and then access it by property name:

const objects = {
  object1: [
    { x: 96, y: 0, type: 'type1', yaw: 0 },
    { x: 192, y: 0, type: 'type1', yaw: 0 }
  ],
  object2: [
    { x: 96, y: 0, type: 'type2', yaw: 0 },
    { x: 192, y: 0, type: 'type2', yaw: 0 }
   ]
};

const base_buttons = document.querySelectorAll(".base_build");
base_buttons.forEach(buttons => {
  buttons.addEventListener('click', (e) => {
    build(objects[e.target.value]);
  });
})

const build = (builds) => {
  console.log(builds);
}
<button value="object1" class="btn btn-red base_build" style="width: 45%;">BUTTON 1</button> &nbsp;
<button value="object2" class="btn btn-red base_build" style="width: 45%;">BUTTON 2</button>

Upvotes: 1

Related Questions