Insert a new, unique div onto an HTML webpage using JavaScript, ensuring no duplicates are created

Having an issue with this code snippet where nothing is being added. It seems like the variable result may not be taking a number or something else, but I'm not entirely sure why.

$(document).ready(function () 
    //document.getElementById(1).style.display = "inline-block";
    // https://www.youtube.com/watch?v=pqLS4oyJ8cA
    array.prototype.randsplice = function(){
        var rndNumber = Math.floor(Math.random()*this.length);
        var lstSplice = this.splice(rndNumber,1);
        return lstSplice;
    }
    var lstNumber = new Array(0,1,2,3,4,5,6,7,8,9);
    var result = lstNumber.randsplice();
    document.getElementById(result).style.display = "inline-block";
    var result = lstNumber.randsplice();
    document.getElementById(result).style.display = "inline-block";
    var result = lstNumber.randsplice();
    document.getElementById(result).style.display = "inline-block";
});

Attempting to utilize this resource: Randomly Empty a Javascript Array but have had no success so far. (keep in mind that all div elements have their style display set to none by default.)

If anyone can offer some assistance, it would be greatly appreciated. Thank you

Answer №1

Just a bit further, I've come across 2 errors thus far;

  1. The missing { in $(document).ready(function (). It should be $(document).ready(function () {
  2. array.prototype.randsplice ought to be corrected to Array.prototype.randsplice

Remember, you'll need jQuery for this script to work correctly. Here's the final JSFiddle link

Answer №2

Remember to define Array.prototype.randsplice with an uppercase letter A.

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

Converting Json arrays to HTML tables using the window.chrome.webview.addEventListener feature with a Server Delphi Application

My Delphi application is sending Json data to the embedded Edge browser, but Javascript is reporting a parser error. https://i.sstatic.net/Z2BUq.png https://i.sstatic.net/0IIzJ.png When I modify the value for Sender.DefaultInterface.PostWebMessageAsJson ...

ajaxCRUD: Double inquires about adding data

I recently delved into using the ajaxCRUD library, which appears to be a straightforward yet powerful tool. Within my database, I have a table of users structured as follows: CREATE TABLE tbl_users ( usr_id INT NOT NULL AUTO_INCREMENT , usr_n ...

Executing simultaneous asynchronous queries with Mongoose results in an error: `SyntaxError: Illegal return statement` due to

My goal is to make multiple asynchronous requests to Mongo using Mongoose in parallel. To achieve this, I created a helper function that handles these queries dynamically without knowing the exact number beforehand. While my current implementation works ...

Detecting click events in D3 for multiple SVG elements within a single webpage

My webpage includes two SVG images inserted using D3.js. I am able to add click events to the SVGs that are directly appended to the body. However, I have encountered an issue with another "floating" div positioned above the first SVG, where I append a dif ...

Discover the way to retrieve PHP SESSION variable within JavaScript

I'm currently working on developing a platform for image uploads. As part of this project, I assign a unique identifier to each user upon login using $_SESSION['id'] in PHP. Now, I am looking for a way to verify if the $_SESSION['id&apo ...

I am struggling to retrieve the temporary name of an image upload with PHP and AJAX

I am working on a project where I need to extract the temporary name of an uploaded image using PHP and Ajax. While I have successfully retrieved the file name of the uploaded image, I am facing difficulties in getting the temporary name. Below is the snip ...

Techniques for transferring child properties and values to parent components upon the screen being initialized

Is there a way to pass property values from a child component to a parent component when the react app is first loaded? In my scenario, I have a parent component named app.js that renders a home component containing a JSON component. Initially, upon loadi ...

I am trying to figure out how to dynamically set the deployUrl during runtime in Angular

When working with Angular, the definition of "webpack_public_path" or "webpack_require.p" for a project can be done in multiple ways: By setting the deployUrl in the .angular-cli.json file By adding --deployUrl "some/path" to the "ng build" command line ...

Decrease the distance between hyperlinks

I understand that this question has been asked numerous times before, but as a beginner in HTML, I still require some assistance. Given the code provided below, how can I decrease the spacing between the links in each column? Code: a { color: white; ...

Getting the click event object data from a dynamically created button with jQuery or JavaScript

I have a task of tracking page button click events. Typically, I track the objects from statically created DOM elements using: $('input[type=button]').each(function () { $(this).bind('click', function () { ...

Stylish border radius for Bootstrap progress bars

Here is a snippet of code that I am struggling with: .progress-bar{ border-top-right-radius: 40px !important; border-bottom-right-radius: 40px !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-sha ...

Storing the ID, Class, or Name in a variable for safekeeping in Python

I need assistance with extracting and saving an email from 10minutemail.net using Python. Here is my current code: from selenium import webdriver from time import sleep driver = webdriver.Chrome(r'''C:\WebDriver\chromedriver.exe& ...

Navigating Paths in Real-time with Javascript - Node.js

When working with PHP, dynamic routing can be achieved by defining classes and methods like: class Route { public function homePage () { echo 'You are on the home page' } public function otherPage () { echo 'You are on so ...

Creating personalized hooks that rely on React query requests

Utilizing a series of custom hooks, I am able to fetch data and perform various calculations based on that data. One particular hook calculates the total amount that should be set aside monthly for future expenses, using the output from previous data-fetch ...

What are some ways I can ensure my webpage remains consistent and user-friendly when scrolling, rather than appearing distorted and jumbled?

Is there a way to automatically scroll my page when the window is at a small height, instead of adjusting it to the height by squeezing it? I've tried using overflow in different ways, but haven't been successful in getting the entire page to scr ...

Is it possible to combine the use of 'res.sendFile' and 'res.json' in the same code?

At the moment, my Express app utilizes a controller to manage routing. When a specific route is accessed, I trigger pagesController.showPlayer which sends back my index.html. This is what the controller looks like: 'use strict'; var path = requ ...

variable containing a combination of left-to-right and right-to-left characters

I am working on a piece of text which contains Hebrew (rtl) and English (ltr) letters. It is a song with chords placed above the words. The issue I am facing has to do with the chords - because the site is rtl, the chords appear messy. Is there a way to h ...

The combination of select2 and jsonform is not functioning properly

I am having trouble rendering multiple select2 with JSON form. $('#resource-form').jsonForm({ schema: { rest: { type: 'object', properties: { template_id: { type: "array", items: { ...

Two liquid level divs within a container with a set height

I hesitated to ask this question at first because it seemed trivial, but after spending over 3 hours searching on stackoverflow and Google, I decided to give it a shot. The issue I'm facing can be found here: http://jsfiddle.net/RVPkm/7/ In the init ...

I encountered an issue where the font awesome icons failed to load on my website

My website is experiencing an issue where all the Font Awesome icons are not displaying despite having added Font Awesome. Here is the link to my site: https://i.stack.imgur.com/RcNtv.png .login-top .lg-in::before { font-family: "Fontawesome"; ...