Switch out feature within prototype attribute looping

I'm attempting to substitute all hyphens in attributes with underscores.

<a href="/page" id="someId" data-country="north-america" data-state="north-dakota">North Dakota</a>

This is the code snippet I am using:

var el = document.getElementById('someId');
Array.prototype.slice.call(el.attributes).forEach(function(item) {
   item.value.replace('-','_');
   console.log(item.value);
});

I can't seem to figure out why the hyphen is not being replaced with an underscore. Is there something crucial that I'm missing?

javascriptarraysprototypejs

Answer №1

String.prototype.replace() provides a new String as output, without modifying the original String. Simply assign the updated value and you're good to go.

result.value = result.value.replace('-','_');

As stated in MDN's documentation:

Using this method does not alter the original String object. It merely generates a fresh string instance.

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

Attempting to extract information from mySQL and convert it into a PHP array

Lately, I have dedicated my time to a project. In this project, I have set up a database which stores various elements like id, title, imgUrl, intro, and content. My goal is to fetch this data from the MySQL database and organize it into a PHP array as dep ...

phpmysqlarrays

When an object is not empty, the function Object.getOwnPropertyNames will still return an empty array

In my code, I am filling $scope.master with data from a csv file. When I populate $scope.master within the function, all the data is present. This can be observed in the log output displayed below. However, outside of the function, although $scope.master ...

javascriptangularjsd3.js

Error encountered: Denied access in AWS Transcription Node JS API

I have been working with the AWS transcription API in Node JS and my code looks like this: const tClient = new TranscribeClient({ region: "us-east-1", credentials: { accessKeyId: AWS_ID, secretAccessKey: SECRET, ...

javascriptnode.jsamazon-web-servicesamazon-transcribe

Generate an array of responses within a child component and then send this array to the parent component using Vue.js 2

Currently, I am in the process of creating a survey using Vue 2. My goal is to construct and emit the answers array to a parent component named Evaluation. You can view the structure of this array here: https://pastebin.com/rLEUh56a Within my project, the ...

javascriptarraysvue.jsobjectemit

having difficulty implementing the blur effect in reactJS

Currently, I am working on developing a login page for my project. Below is the code snippet I have implemented for the functionality: import React, { useState, createRef } from "react"; import { Spinner } from "react-bootstrap"; import ...

javascriptcssreactjs

Creating HTML code using Django and JavaScript

Greetings world! I am relatively new to Python and JavaScript, so my coding techniques might seem unconventional to seasoned developers. However, I am eager to learn and improve. I have an HTML page where Django generates some code for a calendar: Here&a ...

javascriptjquerypythonajaxdjango

What are the best practices for ensuring secure PUT and DELETE requests?

For the backend of my current project, I have a question regarding security measures. As an illustration, one of the tasks involves handling various "/notes" requests. /notes => retrieve all notes belonging to the authenticated user /notes => creat ...

javascriptphpnode.jsbackend

Having trouble adjusting the label fontSize in ReactJS when using semantic-ui-react?

Is there a way to decrease the size of the label for a form input? In this scenario, attempting to set the fontSize does not work: <Form.Input label="Username" style={{fontSize: '10px'}} /> Does anyone have any suggestions on how to res ...

javascriptreactjssemantic-ui-react

Encountering an issue: The API call for /api/orders was resolved but no response was sent, potentially causing requests to become stuck in Next.js

Struggling with an error while working on an ecommerce website using Next.js. The error message reads: error: API resolved without sending a response for /api/orders, this may result in stalled requests The error also indicates: API handler should not ...

javascriptreactjsnext.js

Tips for patiently waiting for a series of asynchronous calls to successfully complete

I have a scenario where I am dealing with multiple asynchronous calls that are dependent on each other's success. For example: function1 = () => { /*Some required Logic*/ return fetch("myurl") .then((json) => { functi ...

javascriptjqueryajaxasync-await

Tips on blending a background with three.js sprite image?

Currently, I am facing issues with blending sprites in three.js to load textures for points (originally a pointcloud). Unfortunately, the blending does not seem to work correctly. Below is the code snippet that I am using: this._renderer = new THREE.WebGL ...

javascriptthree.js

"Encountering errors during npm installation due to a failed preinstall

Having identified security vulnerabilities for knexnest > knex > minimist, I encountered an issue where the minimist version did not update using npm audit fix or a simple npm update. Following the steps outlined in this informative article resolved ...

javascriptnpmnpx

Issue with Cascading Dropdowns in jQuery

I am currently experiencing issues with a piece of code on my website (also accessible via this link). The code consists of 2 select fields that should display different data based on the selection made. However, I have identified 2 bugs within the code. ...

javascriptjqueryhtml

zingcharts with multiple lines on x axis representing time

I am facing a rather interesting challenge with plotting data. I want to create a chart where time is the x-axis scale and multiple lines are plotted, each with varying time intervals between data points. While zingcharts has provided documentation on gene ...

javascriptjsonchartszingchart

Upgrading to NPM version 7 or higher: A guide to effectively installing packages using the "lockfileVersion" parameter: 1

After upgrading NodeJS to version 16, I noticed that NPM version 8 is now included. This means that when I install packages, the package-lock.json file is generated with a "lockfileVersion": 2. However, I prefer the older format of "lockfileVersion": 1. ...

javascriptnode.jsnpmpackage-lock.json

Unable to retrieve user attributes (provided as res.locals.user) in express and hbs view

Here is a snippet of code I use to verify user tokens and store the user information in req.locals: exports.isLoggedIn = async (req, res, next) => { if (req.cookies.jwt) { try { const decoded = await promisify(jwt.verify)( ...

javascriptnode.jsexpresshandlebars.js

Skipping the validation of a variable in a return statement with Angular and Javascript

Is there a way to exclude level a.3 from the return in the completion form if a.3 is undefined? scope.isValid = function() { return a.1 && a.2 && a.3; }; ng-disabled="!isValid()" ...

javascriptangularjsangular-material

Troubleshooting: React is not defined in Rollup + React 17 with updated JSX Transform

I'm currently working on prototyping a microfrontend architecture using Rollup and multiple create-react-app applications. However, when I try to locally yarn link my external app with the container app, I am encountering the following error: The err ...

javascriptreactjsreact-routerrollupjs

Presenting a dynamic selection of files from a database in a dropdown menu with looping functionality using Laravel

I have a dropdown menu that I want to use to display input files from the database based on the selection made. Here is the scenario: When a dropdown option is chosen, it should show input files derived from the "loop_atachment" table (based on the select ...

javascriptphpajaxlaravellaravel-5

Vue's push() method is replacing existing data in the array

I'm currently facing an issue where I am transferring data from a child component, Form, to its parent component, App. The data transfer is functioning correctly, however, when attempting to add this data to the existing array within the App component ...

javascriptvue.js