Manipulate Attributes in Javascript

Having an issue here - I'm trying to use JavaScript to set some attributes.

for(i=0;i<div_navi.childNodes.length;i++){                      
    if(div_navi.childNodes[i].nodeName =="SPAN"){
        div_navi.childNodes[i].setAttribute("onclick","getContent(div_navi.childNodes[i].textContent); 
        div_navi.childNodes[i].style.cursor ="pointer";
    }
    if(div_navi.childNodes[i].nodeName =="A")
        div_navi.childNodes[i].setAttribute("href",div_navi.childNodes[i].textContent);
    }
}

I'm attempting to pass a parameter in getContent, but it's not functioning as expected. Any thoughts on how to resolve this?

javascripthtmlajaxdom

Answer №1

Ensure correct usage of quotes and properly implement event binding to set the href property instead of setting it directly.

div_navigation.childNodes[i].onclick = function(){
    updateContent(this.textContent)
};
div_navigation.childNodes[i].href = div_navigation.childNodes[i].textContent;

Answer №2

Instead of using setAttribute to set an event, it is recommended to assign a function directly to the onclick property like this: 

div_navi.childNodes[i].onclick = [function]
. Alternatively, you can use the addEventListener method for better practice:

div_navi.childNodes[i].addEventListener('click', displayContent);

function displayContent(e) {
   console.log(e.target.textContent);
}

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

Can you explain the meaning of arguments[0] and arguments[1] in relation to the executeScript method within the JavascriptExecutor interface in Selenium WebDriver?

When utilizing the executeScript() method from the JavascriptExecutor interface in Selenium WebDriver, what do arguments[0] and arguments[1] signify? Additionally, what is the function of arguments[0] in the following code snippet. javaScriptExecutor.ex ...

javascriptjavaseleniumselenium-webdriverwebdriver

how to pass arguments to module.exports in a Node.js application

I have created a code snippet to implement a Node.js REST API. app.js var connection = require('./database_connector'); connection.initalized(); // I need to pass the connection variable to the model var person_model = require('./mod ...

javascriptnode.jsexpress

Using AngularJs to have two ui-views on a single page

As a beginner in AngularJs, I encountered an issue with having two ui-views on the same page. When I click a button to show the view for goals, both the form for goals appear in ui-view 1 and ui-view 2 simultaneously. I have been working with states but I ...

javascripthtmlrubyangularjs

Struggling with replacing text in an array using Javascript (Angular)

I am facing an issue where I need to remove the 'hello' substring from each object field in my objects array. However, I keep getting an error message saying "Cannot read property 'indexOf' of null". This error is occurring because I am ...

javascriptangularjs

Mastering the art of implementing async/await properly within token validation scenarios

I am currently working on setting up an Express.js backend for a website that authenticates users using Google Sign-in. My goal is to develop a RESTful API call that: Accepts an ID token. Authenticates the token using Google's OAuth2 Library. Veri ...

javascriptnode.jsexpressasync-awaitgoogle-signin

I am wondering why the vue-router is only changing the URL and not displaying the corresponding view component

I've encountered an issue where the vue-router is only toggling the URL when clicking on the navigation link, but not updating the view component. Surprisingly, there are no apparent errors in my code. Despite this, the console indicates that the Home ...

javascriptvue.jsvuexvue-router

Using Javascript, delete all chosen HTML elements containing innerText

Looking to extract certain HTML tags from a block of code in TextArea1 and display the modified output in TextArea2 upon clicking a button. <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8&quo ...

javascripthtml

Using JQUERY to select all child checkboxes within a tree structure and check them all

I am looking to create functionality where checking the parent checkbox will automatically check all child checkboxes. While I have gotten this to work for the bottom parent checkbox, it does not seem to function correctly for any parent checkboxes highe ...

jqueryhtmltreeview

When a page with parameters is reloaded, React fails to initiate

I'm encountering an issue with my application in development mode on localhost. When I try to reload the app on a route with parameters, for example: localhost:8080/item/2 React fails to initialize and only a blank page is displayed. However, if I ...

javascriptreactjsreact-router

Troubleshooting the Problem with CSS Margin in HTML Footer

I'm encountering an issue with the footer on my website. The margin: auto; command doesn't seem to be working for the list items in the footer. I want the items in the footer to occupy one-third of the width, but no matter where I place the marg ...

htmlcssmarginfooterlistitem

What is the best way to eliminate spaces, commas, and periods from a variable in javascript?

After attempting var res = str.replace(/ |,|.|/g, ""); and var res = str.replace(/ |,|.|/gi, "");, I'm still puzzled as to what I might be missing. var str = "Text with comma, space, and period."; var res = str.replace(/ |,|.|/g, ""); document.writ ...

javascripthtml

Phonegap experiencing issues with executing JavaScript code

My attempt to utilize phonegap is encountering an issue where my javascript is not running. Here's what I've tried so far: <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" / ...

javascriptioscordovaios7

What is the process for implementing a splash screen in VueJS?

Having trouble creating a splash screen (loading-screen) in Vue JS that fades away after a few seconds to reveal the default view? I've experimented with several approaches, but none seem to be working for me. The closest example I found is on CodePen ...

javascriptvue.jsvuejs2

From HTML to Mat Table: Transforming tables for Angular

I am currently facing a challenge with my HTML table, as it is being populated row by row from local storage using a for loop. I am seeking assistance in converting this into an Angular Material table. Despite trying various suggestions and codes recommend ...

javascriptangularangular-material

Incorporating external script into React website's functional component

I have invested countless hours on this particular issue, which appears to be quite trivial, yet I am unable to pinpoint where my mistake lies. I recently purchased terms and conditions from Termly.com and now wish to showcase these terms and conditions o ...

javascriptreactjsreact-scripts

Utilizing Sharepoint - accessing the Sp.Web.currentUser Property

I'm diving into a website I've been tasked to explore. While my HTML skills are limited, I'm eager to retrieve some SharePoint information using JavaScript. I launched my console and experimented with: var value = SP.Web.get_currentUser();, ...

javascriptsharepoint

In the matrix game, if a user chooses two balls of the same color, those two matching color patterns will be eliminated

I am currently working on a matrix game with the following condition: When a user selects two balls of the same color, they will destroy the two patterns with the same color. I have successfully implemented horizontal and vertical selection. However, I ...

javascriptcocos2d-xcocos2d-js

Place the image on the canvas

I currently have a canvas where I am able to add text layers and images from flickr. My goal is to enable users to upload an image to the canvas using the html input. For uploading images from flickr, I am using this code: $(".search form.image-search"). ...

javascripthtmlcanvashtml5-canvas

Is it possible to determine if the process for changing Three.js material has been successfully completed?

Is it possible to determine the completion of this process? material.map = new THREE.Texture( canvas ); material.map.needsUpdate = true; If not, sometimes the final result will be a black snapshot. var snapshotData = renderer.domElement.toDataURL(strMi ...

javascriptthree.js

Calculating response time in Selenium with VB.NET: A comprehensive guide

I'm working on creating an automated test to calculate the average response time for a screen's responsiveness. My tools of choice are Selenium and VB.net. Can someone please provide guidance on how to accurately calculate this? The waitforpage() ...

javascriptvb.netseleniumloadautomated-tests