HTML: Any way to reduce the clickable area of a text in an onclick event?-CodePudding

I'm making some buttons with the subtract and add symbols, I want the area where they can be clicked to be exactly the visible area of the symbol, but since I have the font size considerably large, the onclick event happens even in empty places that are near the symbols, I tried to reduce the line height and also tried to reduce the height and width of the div that contains the buttons but nothing works.

PS: Maybe I can fix this by using SVG instead of text, but would like to know first if there is a solution using text.

Example of what happens:

var counter = document.getElementById("counter")
counter = 1;

function subtract() {
  counter -= 1;
  if (counter <= 0) {
    counter = 0;
  }
  document.getElementById("counter").innerHTML = counter;
}

function add() {
  counter  = 1;
  if (counter >= 10) {
    counter = 10;
  }
  document.getElementById("counter").innerHTML = counter;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
  user-select: none;
  margin: 0;
  padding: 0;
}

body {
  background-color: #1B5389;
  color: #e6e6e6;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

#counter {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 160px;
  font-weight: 600;
}

.buttons {
  font-size: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 130px;
  left: 0;
  right: 0;
}

.buttons span {
  margin: 0 10px;
  cursor: pointer;
  background-color: #50fa785b; /* To show the whole area that is clickable */
}

<body>
  <div id="counter">1</div>
  <div >
    <span onclick="subtract()" >-</span>
    <span onclick="add()" > </span>
  </div>
</body>

See all the green area that is clickable? That's exactly what I don't want, what I want to be clickable is just exactly the size of the symbols, like this:

CodePudding user response：

A hacky solution could work like this:

let counter = 1;

function subtract() {
  counter -= 1;
  if (counter <= 0) {
    counter = 0;
  }
  document.getElementById("counter").textContent = counter;
}

function add() {
  counter  = 1;
  if (counter >= 10) {
    counter = 10;
  }
  document.getElementById("counter").textContent = counter;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
  user-select: none;
  margin: 0;
  padding: 0;
}

body {
  background-color: #1B5389;
  color: #e6e6e6;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

.counter-container {
  display: grid;
  font-size: 150px;
  place-content: center;
  place-items: center;
  margin-top: 130px;
  column-gap: 10px;
  grid-template-areas:
    "counter counter"
    "minus      plus";
  grid-template-rows: auto 50px;
  margin: 0 auto;
  width: 170px;
}

.counter-container span {
  cursor: pointer;
  background-color: #50fa785b;
  position: relative;
  overflow: hidden;
  height: 80px;
  width: 80px;
}

.counter-container span::after {
  right: 0;
  position: absolute;
  top: -70px;
}

#counter { grid-area: counter; };

.del { grid-area: minus; }
.add { grid-area: plus; }

.del::after { content: "-"; left: 0; }
.add::after { content: " "; left: -11px; }

<div >
  <div id="counter">1</div>
  <span onclick="subtract()" ></span>
  <span onclick="add()" ></span>
</div>

CodePudding user response：

I think you are overthinking it. Wrap it in div element with your own class, which specify the size in CSS. Of course you are clicking in reality on the div, not spans. I suppose - ... buttons should have same size, right?

divClass
 {
  width: 30px;
  height: 30px 
 }

CodePudding user response：

var counter = document.getElementById("counter")
counter = 1;

function subtract() {
  counter -= 1;
  if (counter <= 0) {
    counter = 0;
  }
  document.getElementById("counter").innerHTML = counter;
}

function add() {
  counter  = 1;
  if (counter >= 10) {
    counter = 10;
  }
  document.getElementById("counter").innerHTML = counter;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
  user-select: none;
  margin: 0;
  padding: 0;
}

body {
  background-color: #1B5389;
  color: #e6e6e6;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

#counter {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 160px;
  font-weight: 600;
}

.buttons {
  font-size: 150px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 130px;
  left: 0;
  right: 0;
}

.buttons span {
  margin: 0 10px;
  cursor: pointer;
  background-color: #50fa785b; /* To show the whole area that is clickable */
}

<body>
  <div id="counter">1</div>
  <div >
    <span onclick="subtract()" >-</span>
    <span onclick="add()" > </span>
  </div>
</body>

CodePudding user response：

You can change the size in the button class. The font-size: Property. And add gap: n px to the button class.

.buttons {
  font-size: 150px; // change it to 30px maybe
  ...
  gap: 90px;
}

Working example:

var counter = document.getElementById("counter")
counter = 1;

function subtract() {
  counter -= 1;
  if (counter <= 0) {
    counter = 0;
  }
  document.getElementById("counter").innerHTML = counter;
}

function add() {
  counter  = 1;
  if (counter >= 10) {
    counter = 10;
  }
  document.getElementById("counter").innerHTML = counter;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
  user-select: none;
  margin: 0;
  padding: 0;
}

body {
  background-color: #1B5389;
  color: #e6e6e6;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

#counter {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 160px;
  font-weight: 600;
}

.buttons {
  font-size: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 90px;
  left: 0;
  right: 0;
  gap: 90px;
}

.buttons span {
  margin: 0 10px;
  padding: 10px;
  cursor: pointer;
  background-color: #50fa785b; /* To show the whole area that is clickable */
}

<body>
  <div id="counter">1</div>
  <div >
    

<span onclick="subtract()" >-</span>
    <span onclick="add()" > </span>
  </div>
</body>

Note: @connexo has correctly pointed out that this line is dispensable.

var counter = document.getElementById("counter")