JavaScript: Activate the element with the first class of its children

Question

JavaScript: Activate the element with the first class of its children

This code is a visual representation of what I'm trying to accomplish...

<style>
.red{background:red}
.blue{background:blue}
</style>

<div id=test>
    <button>1</button>
    <button>2</button>
</div>

<script>
var firstBtn=document.getElementById("test").firstChild.className;

(firstBtn!="red")?firstBtn="red":firstBtn="blue";
</script>

If you want to see it in action, check out the jsFiddle link: http://jsfiddle.net/hnfeje2q/

While this code may be simple, as a newcomer to JavaScript, I may need some guidance...

Thank you!

javascript html css getelementbyid classname

Answer 1

Answer №1

To start, locate the div wrapper with the id of 'test' and then select the first child element within that wrapper using the following code. After that, you can assign the class 'red' to that specific element or button.

var wrapper = document.getElementById("test");
var firstButton = wrapper.childNodes[1];

// if the button doesn't have a red class, add it
if(firstButton.className.indexOf('red') == -1) {
    firstButton.className += ' red';
}

Alternatively, you can use the query selector method like this:

var firstButton = document.querySelector('#test button:first-child');
if(firstButton && firstButton.className.indexOf('red') == -1) {
    firstButton.className += ' red';
}

Answer 2

To start, locate the div wrapper with the id of 'test' and then select the first child element within that wrapper using the following code. After that, you can assign the class 'red' to that specific element or button.

var wrapper = document.getElementById("test");
var firstButton = wrapper.childNodes[1];

// if the button doesn't have a red class, add it
if(firstButton.className.indexOf('red') == -1) {
    firstButton.className += ' red';
}

Alternatively, you can use the query selector method like this:

var firstButton = document.querySelector('#test button:first-child');
if(firstButton && firstButton.className.indexOf('red') == -1) {
    firstButton.className += ' red';
}

Answer 3

Answer №2

Instead of referring to the first button element with document.getElementById("test").firstChild, you will actually be referencing a text node that represents the space between the opening <div id="test"> tag and the first button.

For a more accurate reference to the first button element, use

document.querySelector('#test button:first-child')

var firstBtn = document.querySelector('#test button:first-child');
firstBtn.className = (firstBtn.className !== "red")? "red" : "blue";

Answer 4

Instead of referring to the first button element with document.getElementById("test").firstChild, you will actually be referencing a text node that represents the space between the opening <div id="test"> tag and the first button.

For a more accurate reference to the first button element, use

document.querySelector('#test button:first-child')

var firstBtn = document.querySelector('#test button:first-child');
firstBtn.className = (firstBtn.className !== "red")? "red" : "blue";

Answer 5

Answer №3

Check out the latest version of this code on jsfiddle

var firstButton = document.querySelector('#test button:first-child');

if (firstButton !== "red") {
    firstButton.className = "red";
} else {
    firstButton.className = "blue";
}

Answer 6

Check out the latest version of this code on jsfiddle

var firstButton = document.querySelector('#test button:first-child');

if (firstButton !== "red") {
    firstButton.className = "red";
} else {
    firstButton.className = "blue";
}

Answer 7

Answer №4

To achieve this task, it is advisable to utilize the childNodes property instead of firstChild. The variable firstBtn should contain the class name in string format. In order to change it dynamically, modify the className attribute of the button using a similar syntax.

var firstBtn=document.getElementById("test").childNodes[1].className;
(firstBtn!="red")?document.getElementById("test").childNodes[1].className="red":document.getElementById("test").childNodes[1].className="blue";

Answer 8

To achieve this task, it is advisable to utilize the childNodes property instead of firstChild. The variable firstBtn should contain the class name in string format. In order to change it dynamically, modify the className attribute of the button using a similar syntax.

var firstBtn=document.getElementById("test").childNodes[1].className;
(firstBtn!="red")?document.getElementById("test").childNodes[1].className="red":document.getElementById("test").childNodes[1].className="blue";

JavaScript: Activate the element with the first class of its children

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How can you use jQuery to select and manipulate multiple form inputs with a common class?

Customizing textfield error color in MUI5 React based on conditions

Problem encountered in Python with Selenium/WebDriver: Unable to convert script into a string

Trouble with JavaScript loading in HTML webpage

Ensure to verify the values of two variables when using a switch case statement

Automatically refresh a table within a webpage with updated database information without the need to manually refresh the

Rotating out of the element with the transform rotate effect

Adjusting the view to focus solely on the visible portion of the webpage

Attempting to invoke a static function from a imported ES6 module

Alter the URL for Jquery AJAX post by utilizing radio buttons

Adjust picture dimensions when the window changes (using jQuery)

Tips for positioning two divs in the center of a webpage, both horizontally and vertically, while also including a header and

Regular expression to match a string with a minimum of 10 characters, including at least 3 digits and alphanumeric

Using file types in Vue 3: a beginner's guide

Node.js JSDOM unable to locate the 'parsingMode' property in the code

I must create a dropdown and lift up feature similar to the one provided in the example

Having trouble getting the Keycloak provider to work with Next-Auth?

Manipulating arrays in JavaScript through HTML processing

Utilizing ReactJS to make an Ajax request

Execute various settimeout or display functions on various elements of a webpage