How do I display output from two functions in two IDs at the same time in the same paragraph?

So basically I want when I click a button for it to randomly generate an app idea using words from two arrays. I’ve been stuck for days now and I’m just not sure where the error is. When I try running just the second function and id it doesnt do anything so im thinking the problem lies within the function or the array. Did i name everything correctly? Please forgive me if i used any vocabulary wrong im very new

<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> 
Add Comment
3 Answer(s)

You can use <span> tags (each with its own ID) inside the <p> element to do what you want.

Note that only one element can use an ID name (i.e. ID names must be unique) and an element can only have one ID.

Classes are almost exactly like IDs, but: (a) multiple elements can have the same className, and (b) one element can have multiple classNames.

That is why many libraries (like Bootstrap) only use classes. (The one place where IDs do something that classes cannot, is with HTML Bookmarks). Apart from that, just use classes for everything.

Also, note that you have a typo in your button javascript: randomizefunction !== randomizeFunction.

Here’s proof your code works:

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>

Add Comment

Your second function doesn’t run because you can’t add more than one Id to an element.
If you remove your second Id, your html code looks like this:

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

or you could use class names:

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

In case of using one Id your second function is not needed anymore.
If you want to use class names you need to change

document.getElementById(id) 

to

document.querySelector(classname) 
Add Comment

Let’s go this way, an HTML element can only have 1 id just as an employee can only have a single payment code in a company, and a single payment code can not be used to prepare a payment slip for 2 employees, once the first employee receives the payment, the code would be invalid, which means the next employee would go without pay 🙁

That’s how it is with HTML, when an id is assigned to more than 1 element, the first element in the DOM tree would be the rightful owner.

Come to JavaScript, this language is CaseSensitive, functions, variables and so on must be treated in this manner.

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

But in your own case, I guess what you want to achieve is to concatenate the result of the first function with that of the second function in the same <p> element, to achieve that, just use:

    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)]     } 
Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.