I need to convert following jquery script into javascript
<script type="text/javascript">
window.addEventListener("load", function() {
jQuery(function($) {
$('select.ddlVarianti').on('change', function() {
var optionSelected = $(this).find("option:selected");
var tagliaSelected = optionSelected.text();
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event':'GAevent',
'eventID':'13',
'eventCategory':'product',
'eventAction':'taglia',
'eventLabel': tagliaSelected,
});
});
});
});
</script>
This is what i did
document.querySelector('select.ddlVarianti').addEventListener('change', function() {
var optionSelected = document.querySelector(this).querySelector("option:selected");
var tagliaSelected = optionSelected.text();
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event':'GAevent',
'eventID':'13',
'eventCategory':'product',
'eventAction':'taglia',
'eventLabel': tagliaSelected,
});
});
but i have following error..
Failed to execute 'querySelector' on 'Document': '[object HTMLSelectElement]' is not a valid selector.
Thanks for any suggestion
select.ddlVariantielement, or more than one?document.querySelector(this)is the code causing the problem. You can't pass an element object intoquerySelector.'change', function()to this'change', function({ target }). Then change thisdocument.querySelector(this).querySelector("option:selected");to thistarget.querySelector("option:checked");