Javascript get object value on button click

Question

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

Greedo · Accepted Answer · 2020-11-02 12:29:53Z

1

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>

answered Nov 2, 2020 at 12:29

Greedo

3,5481 gold badge15 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sarun UK · Accepted Answer · 2020-11-02 12:33:20Z

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>

Shahnawaz Alam · Accepted Answer · 2020-11-02 12:42:53Z

0

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>

answered Nov 2, 2020 at 12:42

Shahnawaz Alam

1

1 Comment

54ka Over a year ago

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually of higher quality, and are more likely to attract upvotes.

Collectives™ on Stack Overflow

Javascript get object value on button click

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related