Utilizing JSON for the setAttribute() method

Question

Utilizing JSON for the setAttribute() method

While I've made progress on this issue, I've encountered numerous confusing methods. The goal is to utilize the key:value pairs in attr{} for the setAttribute() function without relying on any framework.

If anyone could provide a straightforward solution:

testDiv = document.getElementById("testDiv");


attr = {

    align:"center",
    title:"The Test Div"

};

//Is it possible to convert JSON to a string and then use it in setAttribute?

for(var x in attr) alert(x + " , " + attr[ x ] );

testDiv.setAttribute( x ,  attr[ x ]);

javascript json

Answer 1

Answer №1

Looks like you're working with an object literal instead of JSON in your code. If I understand correctly, you're trying to set multiple attributes for a specific element. You can achieve this easily by creating a reusable function with a loop:

function setAttributes(element, newAttributes) {
   for (var attr in newAttributes)
     element.setAttribute(attr, newAttributes[attr]);
}

var targetElement = document.getElementById("targetElement");

setAttributes(targetElement, { color : "blue", type : "button" });

Answer 2

Looks like you're working with an object literal instead of JSON in your code. If I understand correctly, you're trying to set multiple attributes for a specific element. You can achieve this easily by creating a reusable function with a loop:

function setAttributes(element, newAttributes) {
   for (var attr in newAttributes)
     element.setAttribute(attr, newAttributes[attr]);
}

var targetElement = document.getElementById("targetElement");

setAttributes(targetElement, { color : "blue", type : "button" });

Answer 3

Answer №2

Forget about “JSON” (basically just a JavaScript object literal) and setting attributes, your issue lies within this chunk of code:

for(var x in attr) alert(x + " , " + attr[ x ] );

testDiv.setAttribute( x ,  attr[ x ]);

The problem arises because you are not using braces with the for loop, which means only the statement immediately following it gets executed. By adding braces, the corrected code would look like this:

for(var x in attr){
    alert(x + " , " + attr[x] );
}
testDiv.setAttribute( x ,  attr[x]);

The setAttribute method isn’t being called inside the loop — it's only called once at the end. What you probably want to do is...

for(var x in attr){
    alert(x + " , " + attr[x] );
    testDiv.setAttribute( x ,  attr[x]);
}

Answer 4

Forget about “JSON” (basically just a JavaScript object literal) and setting attributes, your issue lies within this chunk of code:

for(var x in attr) alert(x + " , " + attr[ x ] );

testDiv.setAttribute( x ,  attr[ x ]);

The problem arises because you are not using braces with the for loop, which means only the statement immediately following it gets executed. By adding braces, the corrected code would look like this:

for(var x in attr){
    alert(x + " , " + attr[x] );
}
testDiv.setAttribute( x ,  attr[x]);

The setAttribute method isn’t being called inside the loop — it's only called once at the end. What you probably want to do is...

for(var x in attr){
    alert(x + " , " + attr[x] );
    testDiv.setAttribute( x ,  attr[x]);
}

Utilizing JSON for the setAttribute() method

Answer №1

Answer №2

Similar questions

MongoDB update operation is incomplete

Is it possible to utilize enums as keys in a Json structure?

Using Vuex: Delay dispatch of action until websocket response received

Unable to navigate beyond the boundaries of an app

What's the reason for the mousewheel functioning in Chrome but not in Firefox?

Access the current page's URL using JavaScript

The function req.isAuthenticated() always returns false and never evaluates to true

Retrieving visual information from Google Street View entity

What is the best way to implement promise function in a JavaScript functional method such as forEach or reduce?

Creating Multiple Fieldsets in a Drupal 8 Content Type

php code to paginate mysql results

What steps can I take to address this issue with my express node and ejs?

When accessing req.user in code not within a router's get or post method

React search filter feature with dropdown selection

Trouble with jquery/ajax form submission functionality

The Nuxt.js landing page is having trouble loading, but all other components are functioning perfectly

When you attempt to "add website to homescreen" on an iPhone, Ajax malfunctions

I'm having trouble installing puppeteer

Using Angular to parse intricate JSON data

Failed Attempt to Execute React Native Application using Command Prompt (iOS)