How do I link my html button value with the variables i've created? right now it says logs it as an html object but not by its value

async function run() {
await Excel.run(async (context) => {
const sheet = context.workbook.worksheets.getActiveWorksheet();
var num1 = document.getElementById("1");
var num2 = document.getElementById("2");
var num3 = document.getElementById("3");
var num4 = document.getElementById("4");
var num5 = document.getElementById("5");
var num6 = document.getElementById("6");
var num7 = document.getElementById("7");
var num8 = document.getElementById("8");
var num9 = document.getElementById("9");

function addtest(num1, num2) {
  return num1 + num2;
}

console.log(num1);

await context.sync();
});
}

When I log this it returns this: HTMLButtonElement {} I want it to log its value of 1.

enter image description here

Solution

This is happening because you are only getting the element itself with your current JavaScript code. You should use innerHTML, innerText, or textContent properties to get the value it holds. Please note that all of them return a string, so you should parse their values before using it.

In your case, I believe innerHTML is what best applies. So, this is what you should be doing:

var num1 = parseInt(document.getElementById("1").innerHTML);

Repeat this code for num1 to num9 and you should be good to go.

The innerHTML Property

From W3Schools definition:

The innerHTML property sets or returns the HTML content (inner HTML) of an element.

The example below can clarify how .innerHTML works a bit better:

// From your example:
var num1 = document.getElementById('1').innerHTML;

console.log("<button> holds:", num1);

// From other use cases
let h = document.querySelector('#heading').innerHTML;
let p = document.querySelector('#paragraph').innerHTML;

console.log('<h1> holds: ', h)   ;
console.log('<p> holds: ', p);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>innerHTML Example</title>
</head>
<body>
  <!-- Your example -->
  <button id="1">1</button>

  <!-- Other use cases -->
  <h1 id="heading">This is a heading</h1>
  <p id="paragraph">This is a paragraph</p>
</body>
</html>

Refer to HTML DOM innerHTML Property on W3Schools for more information.