如何使用我创建的变量 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 代码获取元素本身。您应该使用 innerHTML
、innerText
或 textContent
属性来获取它所持有的值。请注意它们都是 return 一个字符串,所以 你应该在使用它之前解析它们的值。
对于您的情况,我认为 innerHTML
最适用。所以,这就是你应该做的:
var num1 = parseInt(document.getElementById("1").innerHTML);
为 num1
到 num9
重复此代码,您应该可以开始了。
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。
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。
试试这个
function addtest(num1, num2) {
return parseInt(num1.textContent) + parseInt(num2.textContent);
}
发生这种情况是因为您只能使用当前的 JavaScript 代码获取元素本身。您应该使用 innerHTML
、innerText
或 textContent
属性来获取它所持有的值。请注意它们都是 return 一个字符串,所以 你应该在使用它之前解析它们的值。
对于您的情况,我认为 innerHTML
最适用。所以,这就是你应该做的:
var num1 = parseInt(document.getElementById("1").innerHTML);
为 num1
到 num9
重复此代码,您应该可以开始了。
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。