HTML + Javascript button selection

Question

So I have 4 buttons, when I click either or button, it should display the number that I've clicked with "Result = (the button number)." If I try creating else statements it still doesn't work. How would I make it so that if I click a specific button, that button number would be displayed

My HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Task 2 </title>
<link href="style.css" type="text/css" rel="stylesheet">
<script src="task2.js" type="text/javascript"></script>
</head>
<body>
<!-- Create a paragraph with id mydata -->
<div id="box">
<p style="font-family: monospace;" id="mydata">Result  </p>

<!-- Create 4 Click buttons -->

  <!-- Number 10 -->
  <p> <button  onclick="myFunction();"> 10 </button></p>

  <!-- Number 20 -->
  <p> <button id="twenty" onclick="myFunction();"> 20 </button></p>

  <!-- Number 30 -->
  <p> <button id="thirty" onclick="myFunction();"> 30 </button></p>

  <!-- Number 40 -->
  <p> <button id="fourty" onclick="myFunction();"> 40 </button></p>


</div>
</body>
</html>

And my JS

var num1 = 10
var num2 = 20
var num3 = 30
var num4 = 40

function myFunction()
{

  var p = document.getElementById("mydata"); // get the paragraph

  if (num1 == 10)
  {
    p.innerHTML = "Result = " + num1;
  }


}

baao · Accepted Answer · 2018-10-21 21:25:22Z

1

You really shouldn't use inline javascript (onclick, ...). Instead, assign an event listener on a container box for your buttons, then listen to clicks and use a data-attribute

document.getElementById('btn-group').addEventListener('click', e => {
  const no = e.target.getAttribute('data-number');
  if (no)
    document.getElementById('mydata').innerText = 'Result: ' + no;
})

#btn-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#btn-group>button {
  margin: 2px;
}

.my-font {
  font-family: monospace;
}

<div id="btn-group">
  <button data-number="10"> 10 </button>
  <button data-number="20"> 20 </button>
  <button data-number="30"> 30 </button>
  <button data-number="40"> 40 </button>
</div>
<p class="my-font" id="mydata">Result: </p>

answered Oct 21, 2018 at 21:25

baao

73.6k18 gold badges152 silver badges209 bronze badges

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

1 Comment

Andy Over a year ago

Might be worth explaining event propagation, or linking to an article about it, if you're going to use it.

Andy · Accepted Answer · 2018-10-22 10:05:41Z

You're much better off removing your inline JS from the HTML and just using JS DOM functions. Here I've added a parent element for the buttons - buttons to which a single event handler can be attached. In JS, events "bubble up" the DOM. Instead of attaching listeners to each button we can have a listener on the parent that catches events as they bubble up. Using the target property we can then work out what button was clicked.

// grab the output element
const mydata = document.getElementById('mydata');

// grab the element with the buttons class and add an event listeners
// this listener will catch the events from clicked buttons
// and call `handleClick`
const buttons = document.querySelector('.buttons');
buttons.addEventListener('click', handleClick, false);

function handleClick(e) {

  // set the text content of the output element to the
  // clicked button's text content
  mydata.textContent = e.target.textContent;
}

<section class="buttons">
  <button>10</button>
  <button>20</button>
  <button>30</button>
  <button>40</button>
  </section>
<p id="mydata"></p>

ssc-hrep3 · Accepted Answer · 2018-10-21 21:23:45Z

You need to pass the clicked value to the function, so that you know inside the function what has been clicked.

As mentioned by @bambam, there are certainly better ways to solve this. Mainly the innerHTML might pose a risk for HTML injection.

Here's your adapted example:

function myFunction(clickedValue) {
    var p = document.getElementById("mydata"); // get the paragraph
    p.innerHTML = "Result = " + clickedValue;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Task 2 </title>
<link href="style.css" type="text/css" rel="stylesheet">
<script src="task2.js" type="text/javascript"></script>
</head>
<body>
<!-- Create a paragraph with id mydata -->
<div id="box">
<p style="font-family: monospace;" id="mydata">Result  </p>

<!-- Create 4 Click buttons -->

  <!-- Number 10 -->
  <p> <button  onclick="myFunction(10);"> 10 </button></p>

  <!-- Number 20 -->
  <p> <button id="twenty" onclick="myFunction(20);"> 20 </button></p>

  <!-- Number 30 -->
  <p> <button id="thirty" onclick="myFunction(30);"> 30 </button></p>

  <!-- Number 40 -->
  <p> <button id="fourty" onclick="myFunction(40);"> 40 </button></p>

</div>
</body>
</html>

sajili · Accepted Answer · 2018-10-21 21:36:17Z

0

Small changes in your code JS code:

function myFunction(btn)
{
  var p = document.getElementById("mydata"); // get the paragraph

    p.innerHTML = "Result = " + btn.innerHTML;

}

Replace myFunction() with myFunction(this)

answered Oct 21, 2018 at 21:36

sajili

531 silver badge7 bronze badges

Collectives™ on Stack Overflow

HTML + Javascript button selection

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related