Disorderly array refuses to remain inside designated div

My website features a JavaScript function that generates an array of varying size based on user input.

I use the following code to display the output array, perArray, along with some additional text.

document.getElementById("happyanswer").innerHTML= perArray + " are so happy, yes they are!!!";

The quoted text always remains within the div. As the array elements are displayed, they shift to the right until all elements are shown.

You can view the fiddle here.

Currently, only the happy numbers button is functional. Feel free to disregard any other remaining issues (I'm aware there are many).

javascripthtmlarrayscss

Answer №1

The issue lies in the direct conversion of an array to a string without using .join() method. When not using .join(), JavaScript defaults to joining elements with just a comma, resulting in something like 

109,103,100,97,94,91,86,82,79,70,68,49,44,32,31,28,23,19,13,10,7,1 are so happy, yes they are!!!
. Commas do not trigger line-wrapping. To automatically wrap lines, join the array elements with a comma and space:

document.getElementById("happyanswer").innerHTML = perArray.join(', ') + " are so happy, yes they are!!!";

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

Validation of user input using jQuery

Trying to ensure that the form inputs are not empty has been a challenge. Despite using jQuery for input validation, it seems that the inputs are not being properly checked. Strangely, the submit button still allows the form to be submitted: <form id=" ...

javascripthtmlformsinput

Interactive HTML button capable of triggering dual functionalities

I am working on a project where I need to create a button using HTML that can take user input from a status box and display it on another page. I have successfully implemented the functionality to navigate to another page after clicking the button, but I ...

javascripthtmlbuttonactiondisplay

Display a DIV element containing a button using Jquery

Can anyone guide me on how to use Jquery to load a specific DIV onto the page only when called by a button or event? I've attempted several functions without success, making me question if it's achievable at all. Being new to Jquery, I believe my ...

jqueryhtmlload

Activate an event when a selection matches the current value

When a user selects an option from a select menu, I have set up an event to trigger. However, the event only works when the selected option is different from the current one. I tried changing it to a click event, but that didn't solve the issue. If a ...

javascriptjquery

Using Vue.js to access input elements that are dynamically generated when a function is called

<div v-if="result.length" style="clear:both"> <div v-bind:key="item.id" v-for="item in result"> <div class="ui form"> <div class="field"> <label>Content</label> <textare ...

javascriptvue.js

Include a checkbox within a cell of a table while utilizing ngFor to iterate through a two-dimensional array

I am working with a two-dimensional array. var arr = [ { ID: 1, Name: "foo", Email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f5939a9ab5939a9adb969a98">[email protected]</a>", isChecked: "true" ...

javascripthtmlangulartypescript

Angular version 5 consistently replaces the chosen date with the current date

Currently facing an issue with an input field that contains a date. Whenever a date is selected that is not today's date, it always defaults to the current date and gets saved in the backend. I need the selected date to be saved instead. The console l ...

htmlangulartypescriptreducers

Activate the tab in the center of the tab selection when clicked, utilizing either JavaScript or CSS

Attempting to display the active tab in the middle of a list of tabs using only pure javascript, without relying on the document. List of Tabs: .tablist li:nth-of-type(1) { order: 3; } .tablist li:nth-of-type(2) { order: 2; } .tablist li:nth-of-type( ...

javascriptcsstabsfrontity

Tips for incorporating a monthly parameter in a filter function within Google Sheets

Category 1: https://i.sstatic.net/YeNs2.png Category 2: https://i.sstatic.net/BQeeC.png This was my initial question in Category 2, sourced from Category 1. =SUMIFS(C:C,D:D,"Necessities Others",B:B,"Visa",A:A,">="& ...

arraysfiltersumgoogle-sheets-formulasumifs

Encountering a three.js issue while generating a large number of point lights

//////twinkling stars for (let index = 0; index < 1000; index++) { const stargeometry = new THREE.SphereGeometry(1, 24, 24); //create star sphere size const starmaterial = new THREE.MeshStandardMaterial({ color: 0xffffff }); //define star textur ...

javascriptthree.js

What causes the alignment of text to be overridden by the presence of a floating element?

https://jsfiddle.net/u0Ltgh3e/68/ .text { width: 50%; text-align: justify; } I am currently developing a custom formatting tool for a specific purpose and I am attempting to create a two-column layout similar to the one demonstrated in this Jsfiddle l ...

javascripthtmlcss

The alignment of elements side by side in Angular Flex is not supported, specifically in versions Angular 8.2.1 and Flex-Layout 8.0.0.beta 26

I'm attempting to arrange my boxes in a single line, with the ability to wrap and switch to column mode on smaller phone screens. Desired layout: Wins Losses Ties Points On shrinking screen: Wins Losses Ties Points Code ...

htmlangularflexboxangular-flex-layout

Is your Material UI Responsive Appbar overlapping the main content? Looking for a solution to address this issue?

Currently, I am in the process of developing a website that incorporates a responsive-based app bar with an attached drawer. The design concept I am following can be located at this link, which I have been modifying to suit my needs. However, I have encoun ...

javascripthtmlreactjsmaterial-ui

Error occurred while attempting to upload a file using multipart form data: TypeError message displayed - Unable to access properties of undefined (specifically '0')

I am encountering an issue while trying to send multipart/form-data using axios from the frontend. The same post request works fine in Postman/Insomnia but fails when executed from the frontend. The backend shows the following error: node:events:505 ...

javascriptnode.jsreactjsaxiosmulter

Manipulating Arrays with Functions in C

When passing a one-dimensional array to a function, I typically use the following method. #include <stdio.h> #define ARRAY_SIZE 5 void function(int *ptr_array, int size) { int index; printf("Destination array contents: "); for(index=0;index ...

carrayspointersmultidimensional-array

Initializing a NumPy array with a tuple and filling it with identical tuples

My goal is to initialize an array with identical tuples filled with NaN values: array([[(nan, nan), (nan, nan)], [(nan, nan), (nan, nan)], [(nan, nan), (nan, nan)]], dtype=object) However, it seems that when using array initializations like ...

pythonarraysnumpytuples

If the value stored in $_SESSION['uname'] is not "teacher", redirect back to the homepage

I am currently working on a webpage and I want to restrict access to only users with the username "teacher". I came across this code snippet: <?php session_start(); if(!isset($_SESSION['uname'])){ header('location:(main p ...

phphtml

Ways to verify if TypeScript declaration files successfully compile with local JavaScript library

I have recently updated the typescript definitions in HunterLarco/twitter-v2, which now follows this structure: package.json src/ twitter.js twitter.d.ts Credentials.js Credentials.d.ts My goal is to verify that the .js files correspond correctly ...

javascriptnode.jstypescript

Tips on dividing an Axios request into multiple files in ReactJS?

I've been working on a project that involves making Axios calls in multiple files, and I'm looking to modularize it by passing the call as a prop to other files that require it. Below is the componentDidMount() method containing the call: comp ...

javascriptreactjsreact-nativeaxios

Implementing a Bootstrap 4 modal in Webpack 2

Utilizing only the bootstrap modal functionality, I manually included the required libs (modal.js & util.js) in the vendor section of webpack.config.js If I directly add the vendor.js file, everything works fine. However, since it is bundled, I prefer ...

javascriptnode.jsbootstrap-modalwebpack-2bootstrap-4