Using select to DOM css using attribute

Question

Hi I am trying to display some elements using querySelectorAll to capture attributes and DOM the css for the elements, till now faced with "Syntax error: An invalid or illegal string was specified" will appreciate some help here.

Here is my code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>select sort function</title>
<style>
a{text-decoration:none;display:none;font-family:sans-serif,arial;}
</style>
</head>
<body>
<select id="sortsel" onchange="listFunction()">
    <option value='0'>- All Sorting -</option>
    <option value='1'>Sort A</option>
    <option value='2'>Sort B</option>
</select><br/><br/>
<div>
<a href="javascript:void(0)" data-sortid="1">Sort A sub 1</a><br/>
<a href="javascript:void(0)" data-sortid="1">Sort A sub 2</a><br/>
<a href="javascript:void(0)" data-sortid="1">Sort A sub 3</a><br/>
<a href="javascript:void(0)" data-sortid="2">Sort B sub 1</a><br/>
<a href="javascript:void(0)" data-sortid="2">Sort B sub 2</a><br/>
<a href="javascript:void(0)" data-sortid="2">Sort B sub 3</a><br/>
</div>
<script>
function listFunction(){
    var selectSort = document.getElementById("sortsel");
    var selectedSort = selectSort.options[selectSort.selectedIndex].value;
    console.log(selectedSort);
    var testing = '[';
    testing += 'data-sortid="';
    testing += selectedSort;
    testing += '"]';
    console.log(testing);
    document.querySelectorAll(testing).style.display="block";
}
</script>
</body>
</html>

Much appreciate any help here.

Sanjay Radadiya · Accepted Answer · 2016-07-05 08:43:43Z

2

if we want to query node attribute we may use [data-sortid='1'] like structure

Javascript

function listFunction(){
    var selectSort = document.getElementById("sortsel");
    var selectedSort = selectSort.options[selectSort.selectedIndex].value;
    console.log(selectedSort);
    var testing = '';
    testing += '[data-sortid="';
    testing += selectedSort;
    testing += '"]';
    console.log(testing);

    [].forEach.call(document.querySelectorAll(testing), function (el) {
        el.style.display="block";
    });
}

answered Jul 5, 2016 at 8:43

Sanjay Radadiya

1,29615 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

NewProgrammer Over a year ago

Thanks Sanjay. I didn't realise the DOM was put in as an ARRAY.

Rahul K Over a year ago

You can further optimize the code... see answer stackoverflow.com/a/38279259/3391120

Community · Accepted Answer · 2017-05-23 12:24:14Z

Code Optimization from the sanjay's answer. https://stackoverflow.com/a/38198918/3391120

Run the snippet to see the results. It'll reset the sort result if you click on first item from the select box.

function listFunction(){
    var selectSort = document.getElementById("sortsel");
    var selectedSort = selectSort.options[selectSort.selectedIndex].value;
  var sortResultItems =  document.querySelectorAll("[data-sortid]");
  globalVar = sortResultItems;

sortResultItems.forEach(function(item, index) {
  item.style.display = "none";
  if((parseInt(selectedSort) !== 0) && parseInt(item.dataset.sortid) === parseInt(selectedSort)){
    item.style.display = "block";
  }
});
}

a{text-decoration:none;font-family:sans-serif,arial;}
.sort-result-item {
  display:none;
}

<select id="sortsel" onchange="listFunction()">
    <option value="0">- All Sorting -</option>
    <option value="1">Sort A</option>
    <option value="2">Sort B</option>
</select><br/><br/>
<div>
  <div id="sortResults">
    <div data-sortid="1" class="sort-result-item">
      <a href="javascript:void(0)">Sort A sub 1</a><br/>
      <a href="javascript:void(0)">Sort A sub 2</a><br/>
      <a href="javascript:void(0)">Sort A sub 3</a><br/>
    </div>
    <div data-sortid="2" class="sort-result-item">
      <a href="javascript:void(0)">Sort B sub 1</a><br/>
      <a href="javascript:void(0)">Sort B sub 2</a><br/>
      <a href="javascript:void(0)">Sort B sub 3</a><br/>
    </div>
  </div>


</div>

Lars Graubner · Accepted Answer · 2016-07-05 08:36:02Z

0

Your query has to look like [data-sortid="1234"]. You are missing the surrounding brackets [..].

Try this:

var testing = '[';
testing += 'data-sortid="';
testing += selectedSort;
testing += '"]';

answered Jul 5, 2016 at 8:36

Lars Graubner

8374 silver badges9 bronze badges

3 Comments

NewProgrammer Over a year ago

changed the query to accomodate the [..], error still persists. =(

Lars Graubner Over a year ago

What's the output of console.log(testing)?

NewProgrammer Over a year ago

it output [data-sortid="1"] sanjay helped solved it. I didn't realise the query was put in as an array.

Theodore K. · Accepted Answer · 2016-07-05 08:49:32Z

0

The problem is that document.querySelectorAll(testing) returns an array of elements. You can iterate through them and change their style.diplay like this:

  var arguments = document.querySelectorAll(testing);
  for (var i = 0; i < arguments.length; i++) {
    arguments[i].style.display = "block";
  }

See demo http://codepen.io/8odoros/pen/ZOyoBN

answered Jul 5, 2016 at 8:49

Theodore K.

5,2064 gold badges32 silver badges47 bronze badges

Collectives™ on Stack Overflow

Using select to DOM css using attribute

4 Answers 4

2 Comments

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related