javascript - 按钮必须具有按钮标签吗？(Must a button have a button tag?)

Question

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.

(但是，当我打开chrome开发者控制台查看javascript代码时，没有按钮标签。)

Are the 5 stars considered buttons?

(5星被视为按钮吗？)

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):

(左侧是带有评分栏的网页，右侧是相应的javascript代码（chrome开发者控制台）：)

  ask by user12432260 translate from so

Answer 1

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> .

(每个HTML元素都可以有一个名为onClick的事件侦听器，可以是您可以单击的<div> ，可以是<span> ，在这种情况下，它是<i> 。)

Everything is normal don't worry ;)

(一切正常，不用担心;）)

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

(确保添加css {cursor：pointer;}，这样当您将鼠标悬停时它将显示出手:))

Comment for more UX questions.

(评论更多UX问题。)