Applying style to all elements with a name is failing

Question

I am trying to apply styles to all elements with name "Phone". Applying individually works fine.

var input = document.getElementsByName("Phone")[0];
input.style.border = '1px solid #1D0F9D';
input.style.borderRadius = '18px';
input.style.width = '100%';
input.style.height = '30px';
input.style.paddingLeft = '50px';
input.style.paddingTop = '18px';
input.style.paddingBottom = '18px';
input.style.color = '#1D0F9D';
input.style.fontSize = '14px';
input.style.color = 'black';
input.style.outline = '0px solid #26B6D4';

This renders the input correctly: 1. Flag drop down 2. input field

But looping over all the elements does not render the flag drop down: Similarly setting styles for class phone fails to render it correctly

var inputs = document.getElementsByName("Phone");
for (var i = 0; i < inputs.length; i++) {
    inputs[i].style.border = '1px solid #1D0F9D';
    inputs[i].style.borderRadius = '18px';
    inputs[i].style.width = '100%';
    inputs[i].style.height = '30px';
    inputs[i].style.paddingLeft = '50px';
    inputs[i].style.paddingTop = '18px';
    inputs[i].style.paddingBottom = '18px';
    inputs[i].style.color = '#1D0F9D';
    inputs[i].style.fontSize = '14px';
    inputs[i].style.color = 'black';
    inputs[i].style.outline = '0px solid #26B6D4';
}

Code here : https://jsfiddle.net/hzorum8x/

Probably missing something very basic. what is it?

[What Do You Mean “It Doesn’t Work”?](//meta.stackexchange.com/q/147616/289905) Use the [browser console (dev tools)](//webmasters.stackexchange.com/q/8525) (hit `F12`) and read any errors. Please [edit] your question and provide a [mre]. In the JSFiddle there’s also other stuff that references `input`. Did you forget to adjust this code? — Sebastian Simon, Dec 12 '21 at 10:03
Use [event delegation](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation) instead of assigning multiple event listeners — it’s more maintainable, and applies to dynamically added elements. E.g., use an [event argument](//developer.mozilla.org/docs/Web/API/EventTarget/addEventListener#The_event_listener_callback)’s [`target`](//developer.mozilla.org/docs/Web/API/Event/target). See [the tag info](/tags/event-delegation/info) and [What is DOM Event delegation?](/q/1687296/4642212). — Sebastian Simon, Dec 12 '21 at 10:06

score 1 · Answer 1 · edited Dec 12 '21 at 10:08

1

As far as I am aware, you don't even need javascript in your case.

You've got class="phone" on the <input>, so you can use the class you defined in the <style> section, instead of trying to target the name attribute. Your code should look something like this:

<style>
    .iti {
        width: 100%;
    }
    .phone {
      border: 1px solid #1D0F9D;
      border-radius: 18px;
      width: 100%;
      height: 30px;
      padding-left: 50px;
      padding-top: 18px;
      padding-bottom: 18px;
      color: #1D0F9D;
      font-size: 14px;
    }
</style>

I've also noticed that you defined color twice, and gave a 0px solid #26B6D4 outline, which will essentially not display, so I removed these two lines.

edited Dec 12 '21 at 10:08

Dharman

30,962
25
85
135

answered Dec 12 '21 at 10:02

Loizos Aristeidis

119
1
9

Yeah, this should work, but it does not render the flag drop down. Updated the question. – UpaJah Dec 12 '21 at 11:15
If I understand correctly, you would also like this design to be applied to the dropdown elements, not in the first one only. In this case, you have to target the `li` elements with class `iti__country`. So in other words, add the same style rules of `.phone` to the class `iti__country`, and adjust the paddings accordingly. To make the dropdown cover the whole screen horizontally, add `width: 100%;` to both `iti__flag-container` and `iti__country-list`. – Loizos Aristeidis Dec 12 '21 at 13:49

Fabio Scagliola · Answer 2 · 2021-12-12T12:05:32.380

1

If you only aim to change the style of the elements, using CSS would be simpler

However, the following sample code will hopefully help you

<input name="phone" />
<input name="phone" />
<script>
  addEventListener('load', () => {
    var elements = document.getElementsByName('phone');
    for (var i = 0; i < elements.length; i++) {
        elements[i].style.backgroundColor = '#abcdef';
    }
  });
</script>

edited Dec 12 '21 at 12:05

answered Dec 12 '21 at 10:16

Fabio Scagliola

338
2
11

Setting event-related properties like `onload` is a pretty outdated way of binding events. Always [use `addEventListener`](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. Note that there are [much better alternatives](/q/14028959/4642212) to a `load` listener like `defer` or `DOMContentLoaded`. – Sebastian Simon Dec 12 '21 at 10:31
@SebastianSimon, thanks for the remark. I do not disagree. However, (1) I do not believe this is relevant when it comes to answer this specific answer, (2) the first link in your comment refers to inline event handlers, which are not in use in my sample code, and (3) MDN itself still includes this approach in the `load` event documentation (see https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event) – Fabio Scagliola Dec 12 '21 at 11:18
2

Then here’re the docs for [`addEventListener`](//developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) which say at the top _“**Note:** The `addEventListener` method is the_ recommended _way to register an event listener.”_. – Sebastian Simon Dec 12 '21 at 11:24
1

I updated my answer to use the `addEventListener` method as per the recommendation – Fabio Scagliola Dec 12 '21 at 12:07

Applying style to all elements with a name is failing

2 Answers2