javascript - 获取 [object HTMLLIElement] 而不是文本。 Javascript函数

Question

你好，我有一个简单的 javascript 函数，它通过按一个按钮在无序列表中选择一个随机列表项。它工作正常，单击按钮时控制台吐出一个随机列表项，但是当我尝试在 HTML 页面上显示它时，我得到的只是这个奇怪的 [object HTMLLIElement] 而不是文本。

目标是在列表项之间显示文本。当我单击该按钮时，它会选择一个随机列表项，例如:<li>5</li>但我只想要 5显示出来。

这是 HTML:

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

<button id="randomize">randomize</button>

<p id="result">hello</p>

和 JS:

var randomize = document.getElementById("randomize");
var listItems = document.getElementById("list").getElementsByTagName("li");
var result = document.getElementById("result");

randomize.addEventListener("click", randomizeIt);

function randomizeIt () {
    var randomItem = listItems[Math.floor(Math.random() * listItems.length)];
    result.innerHTML = randomItem;
    console.log(randomItem);
}

提前致谢

Answer 1

好吧，你将结果设置为 li 对象，你必须获取其中的文本

result.innerHTML = randomItem.textContent;