Precautions when using querySelector () (such as some ideas when specifying the name attribute)

Background of writing this article

I was writing a process to get arbitrary HTML using JavaScript's "querySelector () method", but at first I couldn't get it well. The reason why it could not be acquired successfully is that the specification code of the name attribute described when specifying the HTML to be acquired was not written properly. This time, I would like to write notes when using querySelector (), including a device to specify the name attribute.

What is the querySelector () method in the first place?

It is a method of JavaScript and is a method to get arbitrary HTML. A method to get the first HTML element that matches the specified selector. Use it like "document.querySelector (CSS selector)". See the example below for the actual usage.

How I stumbled

While creating the original app, I implemented a radio button, The process of getting the value of the selected button sometimes did not work well.

I would like to take a look at the example below.

index.html

<!--Description of radio buttons. Radio button to choose between iPhone and Android-->
<group class="inline-radio">
  <div>
    <input type="radio" value="1" name="simulation[phone]" id="simulation_phone_1">
    <label for="simulation_phone">iPhone</label>
  </div>
  <div>
    <input type="radio" value="2" name="simulation[phone]" id="simulation_phone_2">
    <label for="simulation_phone">Android</label>
  </div>
</group>

index.js

//Get the radio button element (NodeList)
const phone_list = document.getElementsByName('simulation[phone]');
//The acquired radio button elements (NodeList) are taken out one by one and stored in the variable e.
phone_list.forEach(function(e) {
  //In the case of the clicked (button pressed) element e, the event fires
  e.addEventListener("click", function() {
    //Extract the value (value value) of the clicked input tag and change the variable phone_Store in plan
    const phone_plan = document.querySelector("input:checked").value;
    //Variable phone_plan output
    console.log(phone_plan);
  });
});

• NodeList is, roughly speaking, an object that contains all the HTML information.

I have simple HTML and JS. Please note that it is broken in various ways. There is only a simple radio button (● iPhone ● Android) for the purpose of seeing it. When iphone is selected with the radio button, 1 is output in the console of the verification tool.

console

1

I was able to get the value normally. However, there are many questions implemented with radio buttons in HTML (radio buttons for selecting smartphones, radio buttons for selecting PCs, etc.), and when writing a process to acquire the pressed value of each radio button. I have a problem. It is JS's "querySelector () method" that needs to be reviewed.

The position of the element that the querySelector () method gets is ...

As I wrote earlier, the "querySelector () method" gets ** the first HTML element (Element) ** that matches the specified selector. Therefore, when trying to get the clicked element in the form of the current "querySelector (" input: checked ")", among multiple types of radio buttons, the radio button selection at the top of the HTML I get the value that was set, and I can't get the value well except for the radio button at the top of the HTML.

Specifying the name attribute in the querySelector () method

After investigating various things there, it seems that it is good to specify the name attribute. I tried to fix it as follows.

javascript

//Before correction
const phone_plan = document.querySelector("input:checked").value;
//Revised
const phone_plan = document.querySelector("input:checked[name=simulation[phone]]").value;

If you modify it like this, you should be able to specify something like "the element whose name attribute was clicked by the radio button of simulation [phone]".

But the result is ...

It seems that the value cannot be obtained because it is an invalid selector. (The name attribute is different from the example, but please forgive me ...)

javascript

//This way of writing is correct
querySelector("input:checked[name=name Attribute name]]")

Is correct, but if the class is the specified name attribute (in this case, the name attribute "phone" of the simulation class), the above notation does not seem to work. (Is it because it is covered with square brackets ??)

So, this time I tried to remove the class name.

javascript

//Before correction
const phone_plan = document.querySelector("input:checked").value;
//After the first correction
const phone_plan = document.querySelector("input:checked[name=simulation[phone]]").value;
//After the second correction
const phone_plan = document.querySelector("input:checked[name=phone]").value;

Result is,,

It is an error that there is no value value of phone with name attribute. The correct name attribute is "simulation [phone]". After all, it's a world that isn't as sweet as taking a class name.

And finally, I found an LGTM writing style. So, I found that I should specify the name attribute like this.

javascript

//Before correction
const phone_plan = document.querySelector("input:checked").value;
//After the first correction
const phone_plan = document.querySelector("input:checked[name=simulation[phone]]").value;
//After the second correction
const phone_plan = document.querySelector("input:checked[name=phone]").value;
//After the third correction (LGTM)
const phone_plan = document.querySelector("input:checked[name*=phone]").value;

I put "*" in the name attribute specification. This means "partial match search". In this case, it is a specification method called the name attribute that includes "phone" in the name attribute. So, I was able to get the value safely.

console

1

After that, if you master the name = * while paying attention to the naming of the name attribute, you can implement the application you want!

Various ways to specify the selector

By the way, there are many ways to specify the selector other than name * =. https://hakuhin.jp/js/selector.html

You can read more about how to write selectors on this site, so please take a look. There are various ways to specify attributes, and the range of implementation will expand. It was very helpful.