0

In the code below is a website with a star rating bar. Stars can be clicked. But when I open the chrome developer console to see the javascript code, there are no button tags. Are the 5 stars considered buttons? Isn't there supposed to be a click event listener? When I click on a star it turns blue. How can this work?

And which part of the code is exactly the button? Is it this line? 

<i class="svi-star ratingicon-full"></i>

<div class="subject-answer">
  <div class="ratingbar-container" steps="5">
    <div class="ratingbar-wrap" style="height: 40px; font-size: 38px;">
      <div class="rating" rel="1">
        <i class="svi-star ratingicon-full"></i>
        <i class="svi-star-o ratingicon-outline">
        </i>
      </div>
      <div class="rating" rel="2">
      <div class="rating" rel="3">
      <div class="rating" rel="4">
      <div class="rating" rel="5">
      </div>
    <div class="input-wrapper">...</div>
   </div>
</div>

(I just can not copy and paste, I have to buy another coffee first to get a new code to be able to open this website, but I hope the code part I just typed is enough for now)

On the left is the webpage with the rating bar, on the right is the corresponding javascript code (chrome dev console):

![on the left is the webpage with the rating bar, on the right is the corresponding javacode (chrome dev console)][1]

user12432260
  • 11
  • 2

3 Answers3

0

every HTML element can have an event listener called onClick, it can be a <div> that you can click, it can be <span>, in this case, it's a <i>. Everything is normal don't worry ;)

Make sure to add the css {cursor: pointer;} so when you hover it will show the hand :)

Comment for more UX questions.

Renaldo Balaj
  • 2,390
  • 11
  • 23
  • 1
    Every element **can** have an event listener but it's not there unless one assigns it using code. – Rob Nov 28 '19 at 15:58
  • Thanks. Do you happen to know how to programmtically click that ``````? I tam writing an Android App, and I want the App to click the stars for me. I tried but it dowsn't work. – user12432260 Nov 28 '19 at 20:31
  • It's actually my other question here.: https://stackoverflow.com/questions/59051826/javacsript-android-webview-click-button-programmatically – user12432260 Nov 28 '19 at 20:40
0

You can have click event on every html element there is. Therefore anything can be a button.

document.querySelector('.div').onclick = () => {
  console.log('clicked on a div');
}

document.querySelector('.span').onclick = () => {
  console.log('clicked on a span');
}
.div {
  background-color: red;
  width: 100px;
  height: 100px;
}

.span {
  background-color: blue;
  color: white;
}
<div class="div">
  <span class="span">this is a clickable span</span>
</div>
Nicolas
  • 8,077
  • 4
  • 21
  • 51
  • Yes,but above there is no ```onclick``` and yet it works, that's what I don't understand. – user12432260 Nov 28 '19 at 16:19
  • it's probably in a seperate Javascript file, just like in this snippet. – Nicolas Nov 28 '19 at 16:24
  • ok thanks. Do you hapenn to know if Is it possible to see such an seperate file with the chrome developer console? – user12432260 Nov 28 '19 at 20:29
  • Yes, in the source tab, you will see every file loading when you open the site. I can't tell you exactly where it is, but it must be there. It also might be in a minified file, so there is a chance it's going to be hard to find. @user12432260 – Nicolas Nov 29 '19 at 02:26
0

It's possible to create things which are not buttons which can still be clicked (any element can have a click event listener added to it), and in this case, it appears that the website has some italic elements with no contents and some styling with such associated JavaScript.

Best practice is to use semantic HTML which, in this case, would be <button> elements (or possibly <input type="radio">) as these come with all sorts of affordances (which are particularly useful for accessibility purposes as they allow, for example, an arthritic user who can't operate a mouse to navigate with the Tab key or a blind user to access the content with a screen reader).

Note that depending on your geographical location, your audience's geographical location, and the type of service your website offers: You may be legally required to ensure it is accessible.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Thanks a lot for the explanation. – user12432260 Nov 28 '19 at 20:30
  • Do you happen to know in this case how to programmatically click the first star (button)? I have asked the question here:https://stackoverflow.com/questions/59051826/javacsript-android-webview-click-button-programmatically – user12432260 Nov 28 '19 at 20:42