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

Question

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

602 Views Asked by Josh Bullough At 07 November 2025 at 11:28

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

Original Q&A

There are 2 best solutions below

sonEtLumiere On 14 July 2020 at 03:06

Try this

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

**sandmann** · Accepted Answer

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.

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

There are 2 best solutions below

The innerHTML Property

Related Questions in JAVASCRIPT

Related Questions in EXCEL

Related Questions in SCRIPTLAB

Trending Questions

Popular # Hahtags

Popular Questions