如何在同一段落中同时显示两个 ID 中的两个函数的输出？答案

【问题标题】：How do I display output from two functions in two IDs at the same time in the same paragraph?如何在同一段落中同时显示两个 ID 中的两个函数的输出？
【发布时间】：2020-11-01 10:08:15
【问题描述】：

所以基本上我希望当我单击一个按钮时，它会使用来自两个数组的单词随机生成一个应用程序创意。我已经被困了好几天了，我只是不确定错误在哪里。当我尝试只运行第二个函数并且 id 它没有做任何事情所以我认为问题出在函数或数组中。我是否正确命名了所有内容？如果我很新，如果我用错了任何词汇，请原谅我

<html>
  <button onclick="randomizefunction(); randomizefunction2()">Give me an 
   app idea!</button>

  <p id="randomWord"; "randomWord2"></p>
  </html>

<script>
const myList = ["Calculator", "MOBA", "Fitness App", "Dating App"];
randomizeFunction()

function randomizeFunction() {
    document.getElementById("randomWord").innerHTML = myList[Math.floor(Math.random() * 
myList.length)]
}
const myList2 = ["with lootboxes", "with video ads every 15 seconds", "with pay to win 
microstransactions"];
randomizeFunction2()

function randomizeFunction2() {
    document.getElementById("randomWord2").innerHTML = myList2[Math.floor(Math.random() * 
myList2.length)]
}
</script>

【问题讨论】：

一个html元素不能有多个ID
嗯嗯好吧。这仍然不能解释为什么当我只使用它们时第二个函数和 id 不起作用
因为它找不到 ID 为“randomWord2”的元素
你认为你可以详细说明吗？即使我只用 randomizeFunction2 和 randomWord2 运行它，它也不起作用。我的功能有问题吗？
请原谅我是新手，我这周开始学习

标签： javascript html arrays function

【解决方案1】：

您的第二个函数无法运行，因为您不能向一个元素添加多个 Id。
如果您删除第二个 ID，您的 html 代码如下所示：

<p id="randomWord"></p>

或者你可以使用类名：

<p class="randomWord randomWord2"></p>

如果使用一个 ID，则不再需要您的第二个功能。
如果要使用类名，则需要更改

document.getElementById(id)

到

document.querySelector(classname)

【讨论】：

没问题。不要忘记标记有用的答案（绿色复选标记）。

【解决方案2】：

您可以在<p> 元素中使用<span> 标签（每个标签都有自己的ID）来做您想做的事。

请注意，只有一个元素可以使用一个 ID 名称（即 ID 名称必须是唯一的）并且一个元素只能有一个 ID。

类几乎与 ID 完全相同，但是：(a) 多个元素可以有相同的类名，(b) 一个元素可以有多个类名。

这就是为什么许多库（如 Bootstrap）只使用类。 （ID 做一些类不能做的事情的一个地方是HTML Bookmarks）。除此之外，只需使用类即可。

另外，请注意您的按钮 javascript 中有错字：randomizefunction !== randomizeFunction。

这是您的代码有效的证明：

const myList = ["Calculator", "MOBA", "Fitness App", "Dating App"];
const myList2 = ["with lootboxes", "with video ads every 15 seconds", "with pay to win microstransactions"];

randomizeFunction();
randomizeFunction2();


function randomizeFunction() {
    document.getElementById("randomWord").innerHTML = myList[Math.floor(Math.random() * 
myList.length)];
}
function randomizeFunction2() {
    document.getElementById("randomWord2").innerHTML = myList2[Math.floor(Math.random() * 
myList2.length)];
}

<button onclick="randomizeFunction(); randomizeFunction2()">Give me an 
 app idea!</button>

<p><span id="randomWord"></span> <span id="randomWord2"></span></p>

【讨论】：

不客气。请记住在完成后选择正确答案（绿色复选标记），并为任何对您有帮助的答案投票。

【解决方案3】：

这样吧，一个HTML元素只能有1个id就像一个员工在公司只能有一个支付码，而一个支付码不能用来准备2个员工的支付单，一旦第一个员工收到付款，代码将无效，这意味着下一个员工将无薪:(

HTML 就是这样，当一个 id 分配给多个元素时，DOM 树中的第一个元素将是合法所有者。

来到JavaScript，这种语言是区分大小写的，函数、变量等都必须这样处理。

<html>
    //<button onclick="randomizefunction(); randomizefunction2()">Give me an 
   app idea!</button>
    //check the function names for case-matching
    <button onclick="randomizeFunction(); randomizeFunction2()">Give me an 
   app idea!</button>

    //<p id="randomWord"; "randomWord2"></p>
    //two different elements for your purpose
    <p id="randomWord"></p>
    <p id="randomWord2"></p>
</html>

<script>
    const myList = ["Calculator", "MOBA", "Fitness App", "Dating App"];
    randomizeFunction()

    function randomizeFunction() {
        document.getElementById("randomWord").innerHTML = myList[Math.floor(Math.random() 
        * myList.length)]
    }
    const myList2 = ["with lootboxes", "with video ads every 15 seconds", "with pay to win 
                     microstransactions"];
    randomizeFunction2()

    function randomizeFunction2() {
        document.getElementById("randomWord2").innerHTML = myList2[Math.floor(Math.random() * 
        myList2.length)]
    }
</script>

但在你自己的情况下，我想你想要实现的是将第一个函数的结果与第二个函数的结果连接在同一个 <p> 元素中，要实现这一点，只需使用：

    function randomizeFunction2() {
        //note the use of the same `randomWord` (2)has been removed
        //also note the `+=` for concatenation
        document.getElementById("randomWord").innerHTML += myList2[Math.floor(Math.random() * myList2.length)]
    }

【讨论】：