将 onclick 按钮与简单的 JS 函数链接时出现问题

Question

我一直在尝试将一些 HTML/CSS 功能应用于您在下面看到的简单 JS 代码，其中包括返回基于两个数组的随机句子。

我想创建一个简单的 onclick 按钮来显示生成的句子，但我仍然无法让它工作。你有什么想法或线索吗？我已经设法用 variables/text 完成了它，但是在访问函数时我遇到了一些问题，这当然是程序的重点。

提前感谢大家的帮助。

JS:

const personArr = ["Father Burgundy", "Constable Grey"];
const locationArr = ["the sauna", "the larder"];

const selectArr = (array) => {
 return(array[Math.floor(Math.random()*array.length)]);
}

const createMessage = () => {
 const message = "It was " + selectArr(personArr) + " in " + selectArr(locationArr)"!";
 return message;
};

const init = () => {
 const message = createMessage();
 console.log(message);
};

init();

----------------------------

function demo() {
 document.getElementById("output").innerHTML = init();
}

HTML:

<button id="btn" onclick="demo()">Click here!</button>
<p id="output"></p>

Answer 1

您只需要 return 来自 init() 函数的值，所以这是一个有效的 jsfiddle。

https://jsfiddle.net/vuks89/2cy1fbkd/

const init = () => {
 const message = createMessage();
 console.log(message);
 return message;
};

此外，我不确定您为什么需要在定义后调用 init();。如果只是为了这个用例，它可能是不必要的，因为一旦按钮被点击它就会被调用。

Answer 2

Return init() 中的消息并在最后一个字符串之前添加 + createMessage()

const personArr = ["Father Burgundy", "Constable Grey"];
const locationArr = ["the sauna", "the larder"];

const selectArr = (array) => {
 return(array[Math.floor(Math.random()*array.length)]);
}

const createMessage = () => {
 const message = "It was " + selectArr(personArr) + " in " + selectArr(locationArr) + "!";
 return message;
};

const init = () => {
 const message = createMessage();
 console.log(message);
  return message;
};

function demo() {
 document.getElementById("output").innerHTML = init();
}

<button id="btn" onclick="demo()">Click here!</button>
<p id="output"></p>

将 onclick 按钮与简单的 JS 函数链接时出现问题

Problem when linking onclick button with a simple JS function

html

javascript

onclick

button