Can you suggest a method for randomly arranging the display of submitted input?

I'm still learning javascript and primarily focus on front end development. I want to display user submissions in a randomized manner on the screen, even if it means that everything gets wiped away upon refreshing the page. Currently, this is my code snippet:

<script>
function myFunction() {
    var x = document.getElementById("myText").value;
    document.getElementById("demo").innerHTML = x;
}
</script>

With this setup, user submissions appear at the bottom of the screen after they are entered, but my goal is to have each response displayed randomly across the entire screen.

Although the input is shown below the text box, I am struggling to figure out how to display multiple answers and then randomize their positions on the screen.

Answer №1

To create an interactive display of responses, generate multiple elements and then randomly select one for display.

function populateText() {
  var input = document.getElementById("userInput").value;
  let elems = document.querySelectorAll(".display-area");
  let chosenElem = elems[Math.floor(Math.random() * elems.length)];
  chosenElem.innerText = input;
}
.display-area {
  height: 20px;
}
<input id="userInput"> <button onclick="populateText()">Submit</button>
<div class="display-area"></div>
<div class="display-area"></div>
<div class="display-area"></div>
<div class="display-area"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Preventing scrolling within a jQuery tab using jQuery

Looking to enhance my jqueryUI tabs by incorporating a smooth scroll bar within each tab. I've experimented with various scrollable plugins such as jQuery custom content scroller, TinyScrollbar, and now areaaperta NiceScroll. However, I continue to en ...

Issue with Laravel 5.7 Autocomplete search: JavaScript unable to recognize the specified route

I've been following a tutorial on this video: https://www.youtube.com/watch?v=D4ny-CboZC0 After completing all the steps, I encountered an error in the console during testing: jquery.min.js:2 POST http://apr2.test/admin/posts/%7B%7B%20('autocom ...

Difficulty encountered when deploying cloud function related to processing a stripe payment intent

I've been troubleshooting this code and trying to deploy it on Firebase, but I keep running into a CORS policy error: "Access to fetch at ... from origin ... has been blocked by CORS policy." Despite following Google's documentation on addressin ...

Multiple renderings of React useEffect

I am currently exploring Hooks. I previously implemented a project using componentDidMount. Now, as I dive into learning about hooks, I am in the process of rewriting this project to incorporate hooks. My initial goal is to fetch data and display it on th ...

Conceal the initial modal beneath the overlay when the second modal is activated

I have a situation where I am using a modal that contains a button to trigger a second modal. The issue is that the overlay of the second modal does not hide the first modal, it simply darkens the background. How can I make the overlay of the second modal ...

Setting up nunjucks for using custom filters with express

My attempt to implement a custom filter with nunjucks, as per the documentation, resulted in an error message: Error: filter not found: my_filter_here Here are the configurations I have: index.js const express = require('express'); const nunjuc ...

CSS-Enabled Panels held in place with Draggable Feature

Currently immersed in my first ASP.net/HTML/CSS Application, I am exploring the realm of draggable panels using the Ajax-Control-Toolkit. So far, it's been a successful endeavor as I have managed to implement a single panel into my application! As de ...

The collapsible navigation bar in Bootstrap

I'm having issues with my Bootstrap collapsible menu. Can someone help me identify the problem? <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class= ...

Divergent behavior observed with Bootstrap modal focus trap on official documentation website

Having an issue with Bootstrap modal not trapping focus inside the modal. Surprisingly, it works as expected on the official Bootstrap webpage here. I've used the exact code from the Bootstrap website but for some reason, it's not working in my ...

What is the most efficient method for converting a string into an object in a Node.js environment?

This code seems to be functioning correctly, but it appears quite lengthy. Is there a more concise approach to achieve the same result? The primary objective here is to extract a sorting parameter from an HTTP query and use it to sort a collection in Mong ...

What is the best way to configure TypeScript for recognizing import paths that include RequireJS plugins such as "plugin!./path/to/foo"?

Let's say we have the following scenario: import template from 'hb!./foo.hb' Is there a way to inform TypeScript about this import statement (or simply ignore it, knowing that RequireJS will take care of it)? ...

Bootstrap 4: Spacing between columns within a row

This design is almost complete, but I am facing difficulties in adding gutters between column divs in a row (on the right side, green). Additionally, configuring the width of the div that holds all the rows (blue) is proving to be challenging. You can find ...

html table displaying incorrect data while using dynamic data in vue 3

example status 1 Hello there! I'm trying to create a table (check out example status 1 for guidance). Here's the code snippet I am using: <table> <tr> <th>Product</th> <th>Price</th> <th>Av ...

In PHP, capturing the user who clicked on a link to download a file

I need assistance with tracking user downloads in my SQL database. The website allows users to download files by clicking on a link that leads to the file path stored on the server. However, I am struggling to find a way to record which user has download ...

What causes my React app menu to unexpectedly open while simply updating the state without any CSS modifications?

In the Header component, there is a button that triggers the toggleNav function in context.js when clicked. This function changes the state of isNavOpen from false to true, resulting in the opening of the navigation. Surprisingly, there doesn't appear ...

JQuery .click Event doesn't center elements even with transform-origin adjustment

In the JSfiddle provided below, you can see that after a click event occurs, two span (block) elements rotate 45deg to form an "X". However, both elements are slightly shifted left, creating an off-center "X" relative to the parent's true center-origi ...

Unable to access variables beyond the function scope results in an undefined value

I'm currently working with an npm package that shortens URLs but I'm struggling because there isn't much documentation available. The package takes the "this.src" URL and shortens it, but when I try to use the "url" element in HTML, it retur ...

Top method for identifying genuine users and preventing bots

Utilizing a Maps API can be costly, especially with the fees per request To minimize requests, I heavily rely on caching techniques The API is invoked on every pageload, but unnecessary for non-human users like googlebot What would be the most effective ...

Error message: The callback function provided is not valid

While trying to improve my searching and updating functionality, I developed a method as shown below: mergeAinBbyAttr: function(a, b, attr, val, cb) { async.forEach(a, function(itemA, callbackA) { async.forEach(b, function(itemB, callbackB) { ...

Using InnerHtml functionality can be successful on the initial attempt, but may encounter issues following a Post

Currently, I have a webpage that features an empty div with the id "PreAcquisitionDiv" and it is set to run on the server. When the C# code-behind runs on Page_Load, I create a table and assign it to PreAcquisitionDiv.InnerHtml. Everything appears fine o ...