Implementing a Unique Shuffle Algorithm in JavaScript for AMP Compatibility

Is there a way to make this JavaScript Random Shuffle code in a table AMP compliant? Specifically, is there a way to convert the stringId to be the table's Id?

<script>function shuffleTable() { var table = document.getElementById("tableId"); var rows = table.rows; var numRows = rows.length; var tbody = rows[0].parentNode; for (i = 0; i < numRows; i++) { tbody.insertBefore(rows[Math.ceil(Math.random() * (numRows - 1))], rows[i]); } } shuffleTable()</script>

*I have found this code to be effective in regular HTML pages.

javascriptamp-html

Answer №1

To achieve the same functionality, you will need to implement it using your server-side programming language (such as PHP, Ruby, etc).

While you have the option to utilize the amp-script component for writing JS code, it is still considered experimental and may result in unexpected errors, making it unsuitable for production use.

Furthermore, even if the amp-script were completely reliable, your code would still fail because it modifies elements during page load, which goes against the rules of using custom JS in AMP. According to AMP guidelines, element mutation with JS is only allowed upon user interaction in AMP.

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

The tab indicator in Material-UI fails to update when the back button is clicked

My code is currently functioning well: The tab indicator moves according to the URL of my tab. However, there is a peculiar issue that arises when the back button of the browser is pressed - the URL changes but the indicator remains on the same tab as befo ...

javascriptreactjsmaterial-uitabs

Repairing the orientation in unique threejs capsule geometric shape

Exploring the realm of custom geometry in three.js, I decided to experiment with modifying Paul Bourke's capsule geometry example. However, as I delve into creating my own custom capsule geometry, I have encountered two main challenges: The orienta ...

javascriptthree.jsgeometrynormals

Loading vue.config.js Asynchronously for Pre-Rendering Meta Data

I am facing an issue with asynchronously loading data in my Vue.js application's config for use with Chris Fritz's PrerenderSPA webpack plugin. It seems that the routes are not being pre-rendered as expected. When I manually input the values, th ...

javascriptvue.js

JavaScript: Translating Date into Moment

Is there a way to convert a Date object to Moment in JavaScript? let testDate = new Date(2020, 05, 03, 1, 2); I attempted the following code without success toMoment(testDate) What is the correct syntax to achieve this conversion? ...

javascripttypescript

Exploring the efficiency of AngularJS when binding to deeply nested object properties

Are there any performance differences to consider when data binding in Angularjs between the following: <div>{{bar}}</div> and <div>{{foo.bar}}</div>? What about <div>{{foo.bar.baz.qux}}</div>? Our team is working o ...

javascriptperformanceangularjsdata-binding

(node:2824) UnhandledPromiseRejectionWarning: ReferenceError: The variable "role" has not been declared

I am currently in the process of getting my discord bot up and running again. The issue is that he is old, and in the previous version, this functionality worked. However, after reading other posts, I discovered that in order to make it work, I need to u ...

javascriptnode.jsdiscorddiscord.js

The button's onclick function is failing to save the record in the database

Hello everyone, I am facing an issue with the ONCLICK button functionality. I have written code to save a form to the database. In the image, there are 2 buttons: Save button (type="submit") Save and New button (type="button") The Save button is ...

javascriptjqueryajaxspringjsp

Endless cycle of React hooks

I am struggling to understand why I keep encountering an infinite loop in my useClick function. I can see that I am updating the state value inside the useEffect using setVal, but according to the second parameter, useEffect should only run on onClick as ...

javascriptreactjsreact-hooks

Does the frame take precedence over the button?

const div = document.createElement('div'); // creating a dynamic div element div.setAttribute('id', "layer1"); // setting an id for the div div.className = "top"; // applying a customized CSS class div.style.position = "absolute"; // sp ...

javascripthtmliframegreasemonkeyframe

Use npx to reverse the update from React version 18 to version 17

Is there a way to downgrade a project created using "npx create-react-app . --template typescript"? I've tried manually changing dependencies and then running "npm install" as suggested online, but I always encounter errors. How can I adjust the depen ...

javascriptnode.jsreactjsnpm

The React SwiperJs autoplay feature seems to be malfunctioning, as the swiper is not automatically

I have been utilizing the Swiper component in React from this link. However, I encountered an issue with setting it to autoplay as it doesn't auto swipe. Here is my attempted code: // Resource: https://swiperjs.com/get-started/ import React from &apos ...

javascriptreactjsnext.jsswiper.js

Displaying content on a webpage using PHP, AJAX, and HTML

Looking to update my current form setup. I have a basic Form below: <form action="" method="POST"> <input type="button" value="Generate Numbers" onclick="on_callPhp1()"/> </form> Accompanied by this javascript code: <script type="te ...

javascriptphpjqueryhtmlajax

Unable to modify an element within an array using findIndex

Struggling with updating a value within an array, my research has not yielded a working solution. I have encountered multiple issues. Array = [{ val1: "1", val2: "2", nameval: "name", val4: "3" },{ val1: "4", val2: "5", nameval: "name", val4: ...

javascriptarrays

Capture sound and store it in a specified destination

Looking to capture and save audio files - any recommendations? After searching online, I came across some links for recording audio but they were all dead ends. I even downloaded and tested a few, but no success. I am open to using HTML5, PHP, JavaScript ...

javascriptphpjqueryhtml

Formatting Strings in JavaScript when saving as a .txt file with proper indentation

Utilizing Angular and TypeScript/JavaScript for testing purposes. Each row has been formatted with a newline at the end of the code. formattedStr += car.Name + ' | ' + car.Color + ' | ' + car.Brand + '\r\n' The da ...

javascriptangulartypescript

Don't forget to save the selected date in the datepicker

I have a datepicker with two text fields: fromdate and todate. When I input the month of May and submit, then input another date, the default date should remain as May, instead of changing to the current month. Check out my code below. $(function() { ...

javascriptjquerycodeigniter

How to switch the code from using $.ajax() to employing $.getJSON in your script

How can I convert this code from using AJAX to JSON for better efficiency? AJAX $('#movie-list').on('click', '.see-detail', function() { $.ajax({ url: 'http://omdbapi.com', dataType: 'json', d ...

javascriptjqueryjsonajax

The identical animation is experiencing delays in various directions

Having an issue with my image slider - when clicking on the previous image button, the animation takes longer compared to when clicking on the next image button, even though the animation duration is set to be the same for both. Any idea why this might be ...

javascriptjquerycss

Positional vs Named Parameters in TypeScript Constructor

Currently, I have a class that requires 7+ positional parameters. class User { constructor (param1, param2, param3, …etc) { // … } } I am looking to switch to named parameters using an options object. type UserOptions = { param1: string // ...

javascripttypescriptclassconstructorconstructor-overloading

How to easily toggle multiple elements using jQuery

I'm having trouble getting this block of code to function properly: $("a.expand_all").on("click",function(){ $(this).text('Hide'); $('.answer').each(function () { $(this).slideDown(150, function () { $( ...

javascripthtmljquerytoggle