Error in identifying child element using class name

I need help accessing the element with the class "hs-input" within this structure:

<div class = "hbspt-form".......>
 <form ....class="hs-form stacked">
      <div class = "hs_firstname field hs-form-field"...>
          <div class = "input"....>
              <div class="hs-input"...>

This is what I have attempted so far:

<script type="text/javascript">
var list = document.getElementsByClassName("hbspt-form")[0];
list.style.background = "#fffbd5";
list.style.borderRadius = "5px";
list.style.border= "solid";
list.style.boxShadow = "10px 20px 30px ";
list.style.borderColor = "#f7761f";
list.getElementsByClassName("hs_firstname")[0].style.backgroundColor = "white";
</script>

I am struggling to access even the second class (hs-form stacked). Can anyone provide guidance on how to change the background color of the last class (hs-input)?

Note: Although the console does not display any errors, it indicates that the code cannot be found when executed.

As a newcomer to JavaScript and Stack Overflow, I appreciate your patience and assistance. Thank you!

For reference, here is the code link: http://jsfiddle.net/jg2rek1h/

Answer №1

Here's a suggestion to try out:

let elementList = document.getElementsByClassName("hbspt-form")[0];

let secondElement = elementList.getElementsByClassName('hs-form')[0];
secondElement.style.background = "#333";

let lastElement = elementList.getElementsByClassName('hs-input')[0];
lastElement.style.color = "#94d";

http://jsfiddle.net/b456tgxu/

Answer №2

Take a look at the new CSS stylesheet I just added here: http://jsfiddle.net/jg2rek1h/4/

If you're interested in changing the visual design, consider using CSS. You can learn more about it here: http://www.w3schools.com/css/

For manipulating the appearance with scripts, jQuery is a good option to explore.

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

What is the best way to transfer data to a component that is not directly related

I am looking to showcase an image, title, and description for a specific recipe that I select. Here is my setup using ItemSwiper (parent): <template> <Slide v-for="recipe in storeRecipe.data" :key="recipe.rec ...

Updating the default value of a MUI TextField: Step-by-step guide

I am in the final stages of completing my form, but I have encountered an issue when trying to display the current user's name in the defaultValue variable of the TextField from MUI. If the value starts as ""/null, or essentially empty, the ...

I was able to resolve the fixed position issue of a button on Safari for iPhone 3G

Here is the setup I have on jsfiddle: http://jsfiddle.net/zZDqH/ Currently, there is a button fixed at bottom:0px. You can scroll up and down the page, and the button will stay at the bottom of the page. However, when testing in Safari on an iPhone 3G ( ...

What is the best way to ensure my images are responsive to the varying device sizes when displayed on this website?

In my endeavor to design a 2-column layout using Bootstrap, I aim for each row to consist of two columns: One column will contain text, while the other will display images that complement the textual content. Below is the Bootstrap code snippet for the n ...

Align three divs with three columns in the horizontal center

I am facing a challenge where I need to perfectly center 3 col3 divs in a row. Despite the calculation showing 1.5, I am unsure of the proper method to overcome this hurdle. <div class="row"> <div class="col-md-offset-2 col-md-3" style="height: ...

Having trouble with npm and unable to find a solution that works. Any suggestions on how to fix it?

I've been working on a JavaScript project that requires me to import a library, but I keep running into errors with npm every time I try to use it. Here is the error message: npm WARN deprecated <a href="/cdn-cgi/l/email-protection" class="__cf_em ...

Leveraging the keyword 'this' within an object method in node's module.exports

My custom module: module.exports = { name: '', email: '', id: '', provider: '', logged_in: false, checkIfLoggedIn: function(req, res, next){ console.log(this); } }; I inclu ...

Is AngularJS the right choice for developing this application?

Recently, I've come to the realization that I want to dive into the world of AngularJS framework after working with jQuery for several years. I have a vision of developing an application that allows users to easily modify webpage DOM using a browser- ...

Step-by-step guide to generating a Paypal Button using Vue 3 script setup

After going through the PayPal Developer Docs, I'm still struggling to understand how to integrate the PayPal Button into Vue.js. The code examples provided are unclear, and I can't determine if it's related to Vue 2, Vue 3, or even Angular. ...

Using an image as a button in Vue.js: A step-by-step guide

I'm currently working on creating a login button within a single-file-component using Vue.js in my Rails application with a Vue.js front-end. The purpose of this button is to redirect users to an external login page when clicked. I am wondering how I ...

Select all feature in checkbox is malfunctioning

I need to implement a feature with 3 checkboxes: When the "A" checkbox is clicked, only "A" should be highlighted. Upon clicking the "C" checkbox, only "C" gets highlighted. If the "B" checkbox is clicked, both "A" and "B" nee ...

Is there a bug hiding in the Angular code for the Codecademy Calendar App waiting to be found?

Currently, I am working on the Codecademy task - CalendarApp utilizing AngularJS which involves services and routing. Unfortunately, it seems to have some issues as the data is not displaying correctly and the expression: {{ day.date | date }} appears as i ...

Updating Documents in CouchDB

Can you please confirm if this is the correct method for updating a document in couchDB? To update a document (let's call it fooDoc), I must pass "_rev". First, I need to retrieve that document using the following code (foo.get). Then, in the callbac ...

"Enhance Your Video Experience with a Custom

Currently, I am working on designing a front-page that features a YouTube video as the background with a fixed transparent navigation. Although I have successfully implemented both elements, I am struggling to make sure the video background starts at the t ...

Unable to receive data in an array with Vuejs

Here is the code snippet I am working with: let data = res.data.data; console.log('data: ', data) const list = []; for(let i = 0; i < data.length; i++){ console.log('data i: ', data[i]) //this line is not being printed in the ...

problems encountered while trying to increment ng-click function in Angular JS and Ionic

I'm currently working on developing a quiz using Angular JS and Ionic Framework. However, I've encountered an issue: The "Continue" button is not functioning as expected when clicked (using ng-click) to move to the next question. &l ...

The issue of Angular's ng-repeat view not refreshing after a search query remains unresolved

Having some trouble with updating a results array in AngularJS using a service call. After submitting a form and calling the service, I set up my callbacks with .then() on the promise object. However, the view only updates when I start deleting characters ...

Global jQuery variables are unexpectedly coming back as "undefined" despite being declared globally

I need to save a value from a JSON object in a global variable for future use in my code. Despite trying to declare the country variable as global, it seems like it doesn't actually work. $.getJSON(reverseGeoRequestURL, function(reverseGeoResult){ ...

"Any tips on maintaining the blue color of my dropdown link when it is selected as active

I'm struggling to keep the bootstrap accordion dropdown link blue when it's active. I've tried different methods but none seem to work. What am I missing? Here's my code: <div class="visible-sm visible-xs" id="accordion" role="t ...

Having trouble getting the sorting/search function to work with a click event to display content. It seems to only work with a single item - possibly an issue with the

Creating a function that involves multiple boxes with a search function. The search function is working for the most part, but when clicking on a result, certain content should display. function filterFunction() { var input, filter, ul, li, a, i; ...