如何使用我创建的变量 link 我的 html 按钮值?现在它说将其记录为 html 对象但不是按其值

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();
});
}

当我记录它时 returns 这个:HTMLButtonElement {} 我希望它记录其值 1。

enter image description here

试试这个

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

发生这种情况是因为您只能使用当前的 JavaScript 代码获取元素本身。您应该使用 innerHTMLinnerTexttextContent 属性来获取它所持有的值。请注意它们都是 return 一个字符串,所以 你应该在使用它之前解析它们的值

对于您的情况,我认为 innerHTML 最适用。所以,这就是你应该做的:

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

num1num9 重复此代码,您应该可以开始了。

innerHTML属性

根据 W3Schools 定义:

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

下面的示例可以阐明 .innerHTML 如何更好地工作:

// 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>

有关详细信息,请参阅 W3School 上的 HTML DOM innerHTML Property