hasAttribute, if condition and click event

hasattribute is not a function
hasattribute jquery
hasattribute javascript
javascript has attribute with value
hasattribute python
check if html element has attribute javascript
hasattribute javascript
document element has attribute

I am pretty new to programming, so apologies if this seems like an easy question I should know the answer to.

I basically want to listen to the click of user on a specific div (article-title) and check if the class has an attribute (value = 1). -I actually set the values of the div elsewhere in the code to 0, to see if this works, I want it to log "nope" in the console to be sure that the code saw the if statement about the value's value.

Thanks a lot for your help!

document.getElementsByClassName('article-title')[I]
.addEventListener('click', function (event) {
   if(articleSource.hasAttribute("value"),("1");
   console.log("nope");

});

There is some syntax errors

1) index [I] doesn't mean anything. As you have maybe noticed, .getElementsByClassName returns an HTMLCollection (= an array, a list) of elements. So you have to take the index [0] if you're sure there is only one element article-title. But actually I advise you to use .querySelector('.article-title'), which will return 1 element.

2) In the If statement you have to compare with === (or at least ==) Secondly, hasAttribute doesn't return the value, but the presence. So you have to if(articleSource.getAttribute('value') === '1') but...

3) What is articleSource ? Could you show us how you initialized it ? Are you sure this is a HTMLElement ?

Element.hasAttribute(), Example. Find out if a <button> element has an onclick attribute: var x = document.getElementById(� Definition and Usage. The hasAttribute () method returns true if the specified attribute exists, otherwise it returns false. Tip: Use setAttribute () to add a new attribute or change the value of an existing attribute on an element.


The if statement at the code at the question has a syntax error at

if(articleSource.hasAttribute("value"),("1");

where the comma operator is not a comparison operator, parenthesis around "1" are not necessary, and closing parenthesis around if statement is missing, followed by a semicolon ;.

You can use .querySelectorAll() to get all elements where a specific class is set, use .forEach() to iterate elements, check the element attribute using .getAttribute() which returns a string, compare values using strict equality operator.

document.querySelectorAll('.article-title')
.forEach(function (articleSource, index) {
  articleSource.addEventListener('click', function (event) {
    if (articleSource.getAttribute("value") === "1") {
      console.log("nope");
    }
  })
});

HTML DOM hasAttribute() Method, hasAttribute() method is used to check and return whether an element has the with attributes id, onclick and a Javascript function is declared for it (fun_name();). In the if statement we are checking if the elem variable has the id attribute. Using hasAttribute() Function in JavaScript JavaScript has a hasAttribute() function which can be used to test whether an attribute exists on an element or not. It returns a boolean true if a match is found and a boolean false when no match is found.


Alternative answer using a for loop with your getElementsByClassName since it returns a HTMLCollection; You won't be able to use a forEach on a HTMLCollection.

Once we iterated over each element, we add an event listener that basically obtains the elements instance and retrieve the attribute value by using getAttribute.

Once we have the value we can just wrap it in an if block (or ternary) and just log if the value equals 1 or not.

var elems = document.getElementsByClassName('article-title');

for (var i = 0; i < elems.length; i++) {
  elems[i].addEventListener('click', function () {
     if (this.getAttribute('value') === "1") {
        return console.log('yes');
     }
     return console.log('no');
  });
}
body {
  padding: 10px;
}

.article-title {
  width: 100%;
  height: 35px;
  border: 1px solid black;
  border-radius: 3px;
  margin-bottom: 20px;
  padding: 5px;
}
<div class="article-title">1 = no</div>
<div class="article-title">2 = no</div>
<div class="article-title" value="1">3 = yes</div>

hasAttribute() method in javascript, addEventListener('click', function (event) { // If the event target doesn't match bail if (!event.target.hasAttribute('data-some-attribute')) return;� The ' example also assumes that the Click event of the Button control is connected to ' the event handler method defined in the example. Private Sub button1_Click(sender As Object, e As System.EventArgs) Handles button1.Click ' Get the control the Button control is located in. In this case a GroupBox.


Thanks a lot for all your answers. So a few things so you guys see clearer.

Basically this is an NewsAPI project, so the articleSource is introduced by the api request, and I assign a class to it

articleSource.classList.add("article-source");

It seems to work now having corrected the if statement syntax error. Regarding the value of the attribute, I set it initially after the APIRequest (I get 6 article titles per request). I set it before with

articleSource.setAttribute('value',"0");

I did that to check that the if statement worked, setting the initial value to 0 and the if statement to one would not write anything in the console, but if I changed the initial value to 1, I would see the console log.

Basically, I wanted to figure this out for the next step of my project, which will be to assign a different value to each of the 6 articles when the request is made, and then read those values on click, storing them into an array; so that I have an array of only the ones that were clicked and their value.

Checking event target selectors with event bubbling in vanilla , If the element contains an attribute, the hasAttribute() returns true; otherwise, Select the button with the id btnSend by using the querySelector() method. Check � The toggleAttribute() method of the Element interface toggles a Boolean attribute (removing it if it is present and adding it if it is not present) on the given element.


JavaScript hasAttribute(): Check If an Element Has a Specified , hasAttr() function. You might Check for both. if (typeof attr !== typeof undefined && attr !== false) { // Element has this attribute }. Native JavaScript has a way. If you only have a jQuery reference… $(this)[0].hasAttribute("name"); jQObject[0]. Looks like an extra typeof is in if condition of first code block. Example. Click on a <button> element to display the current day, date and time:


A jQuery hasAttr() Equivalent, hasAttribute is a JavaScript native function and is applied directly to an HTML element. When we select an element with jQuery, a jQuery object is� In case you tick the “Stop Propagation” checkbox, the event handler will prevent further propagation – so, click events on Level 3 will no longer reach Levels 1 and 2, and click events on Level 2 will no longer reach Level 1. See the Pen Event Propagation Example I by Florian Mueller on CodePen.


How to Check If an Element Has Attribute Using jQuery and , <script>. // Using .one() so the handler is executed at most once. // per element per event type. $( "div[id]" ).one( "click", function() {. var idString = $( this ).text() + � The getAttribute() method of the Element interface returns the value of a specified attribute on the element. If the given attribute does not exist, the value returned will either be null or "" (the empty string); see Non-existing attributes for details.