CODEWITHSUNDEEP
javascript
Xelerate
Xelerate

Reputation: 71

Creating buttons with style class and onclick functions only by using javascript. Can it be done smarter?

i am practicing Javascript and been watching some guides online, now i want to make a calculator as a start project, but only by using Javascript.

First question: Is there a smarter way to create these buttons? this is an awfull lot of code when i need to create 17 buttons total for my calculator, and thats just the basics.

How would you make them?

2nd problem: When creating buttons like this, it only displays the two first buttons. "C" and "1". rest isnt displayed:

        var button = document.createElement("button");
        button.innerHTML = "C";
        button.classList.add('btnStyle');

        button.addEventListener("click", function () {
            document.getElementById("result").value = "";
        });

        var button1 = document.createElement("button");
        button1.innerHTML = "1";
        button1.classList.add('btnStyle');

        button1.addEventListener("click", function () {
            button1.onclick = key('1');
        });

        var button2 = document.createElement("button");
        button2.innerHTML = "2";
        button2.classList.add('btnStyle');

        button2.addEventListener("click", function () {
            button2.onclick = key('2');
        });

        var button3 = document.createElement("button");
        button3.innerHTML = "3";
        button3.classList.add('btnStyle');

        button3.addEventListener("click", function () {
            button3.onclick = key('3');
        });

Upvotes: 1

Views: 155

Answers (3)

gretarsson
gretarsson

Reputation: 41

You have to append each button to a parent element (see last line of the loop body in my code example below, just before the last closing curled bracket), otherwise it would "float free" in the DOM and won't show up in the browser's viewport.

Regarding the digit buttons the code could look like this and it might work as long as you have created a container div bearing the id 'keyWrapper' (which also has to be appended to a parent element!):

for (let i = 0; i <= 9; i++) {
 
    let button = document.createElement("button");
    button.id = "btn" + i;
    button.innerHTML = i;
    button.classList.add('btnStyle');

    button.addEventListener("click", function () {
        document.getElementById("result").value = i;
    });

    document.getElementById("keyWrapper").appendChild(button);
}

Upvotes: 0

epascarello
epascarello

Reputation: 207511

Using an array of objects would allow you to structure the code and make it more maintainable.

function numberClicked(evt) {
  console.log(evt.target.dataset.value);
}

function plus() {
  console.log('plus');
}
var operations = [{
  data: '0',
  operation: numberClicked
}, {
  data: '1',
  operation: numberClicked
}, {
  data: '2',
  operation: numberClicked
}, {
  data: '+',
  operation: plus,
  tooltip: 'PLUS'
}, ];


var out = document.getElementById("out");
operations.forEach(function (option) {
  var btn = document.createElement("button");
  btn.type = "button";
  btn.dataset.value = option.data;
  btn.textContent = option.data;
  btn.addEventListener("click", option.operation);
  if (btn.tooltip) btn.title = btn.tooltip;
  out.appendChild(btn);
});
<div id="out"></div>

Upvotes: 0

Brandon
Brandon

Reputation: 122

Building off of what Bouvanni said, you can use a forEach loop on an array of symbols that you need for each button. Example:

// Initialize an array with all the buttons you need
const buttonSymbols = ['1', '2', '3', '4', '5', '+', '-', '/'];

// Loop over the array
buttonSymbols.forEach((symbol) => {
    const button = document.createElement("button");
    button.innerHTML = symbol;
    button.classList.add('btnStyle');
    button.addEventListener("click", function () {
        button.onclick = key(symbol);
    });
});

That way you can create all of the buttons that function in a similar way just in one go. The first button, as it has a different click functionality, will still need to be set separately.

Upvotes: 1

Related Questions