0
function createCalculatorButtons(){
const buttons_row =  6;
let added_buttons= 0;

calculator_buttons.forEach(button =>{
    if(added_buttons % buttons_row == 0){
     input_element.innerHTML += '<div class="row"></div>';
    }
    const row = document.querySelector(".row:last-child");
    row.innerHTML += '<button id = "${button.name}">${button.symbol}</button>';
    added_buttons++;                
})

the buttons are there but with the msg ${button.symbol} instead of the actual symbol

rafaelamarques_p
  • 5
  • 3

1 Answers1

0

Tried to leave this in a comment, but couldn't figure out how to get backticks to show....

When using template literals, use the backtick, not a single/double quote.

function createCalculatorButtons(){
  ...
  row.innerHTML += `<button id = "${button.name}">${button.symbol}</button>`;
    ...             
})
Kinglish
  • 23,358
  • 3
  • 22
  • 43
  • 1
    For future reference: you can show backticks by escaping the first one. ;) – Sven Cazier Dec 02 '21 at 21:06
  • `\`thanks!`\` test – Kinglish Dec 02 '21 at 21:11
  • 1
    The question should have been closed as a typo, or as a duplicate of [How can I do string interpolation in JavaScript?](https://stackoverflow.com/q/1408289/215552) or [ECMAScript template literals like 'some ${string}' are not working](https://stackoverflow.com/q/37245679/215552) instead of being answered... – Heretic Monkey Dec 02 '21 at 22:15