How to add CSS after click through javascript and remove it if not clicked

Question

I have encountered a problem with javascript clicking to change CSS!

I hope that the outer frame and text of the clicked option can be thickened after clicking, but the ones that are not selected should not be thickened! I have tried several ways of writing, but I still don't know how To complete this requirement, I hope to get everyone's help, thank you.

let plan = document.querySelector('.plan');
let price = document.querySelector('.price');
let item = document.querySelectorAll('.item');



for (var i = 0; i < item.length; i++) {
  item[i].addEventListener('click', showplan, false);
}

function showplan(e) {
  //Originally intended to increase this way, but it seems that it can't be written like this
  // e.target.closesst('li').classList.add('bold')
  // e.target.closesst('h2').classList.add('bold')
  const planSelected = e.target.closest('li').querySelector('h2');
  const priceSelected = e.target.closest('li').querySelector('p');
  plan.textContent = planSelected.textContent;
  price.textContent = priceSelected.textContent;
}

@charset "UTF-8";
.product＿list {
  display: flex;
}

.product＿list .item {
  border: 1px solid #ccc;
  border-radius: 6px;
  text-align: center;
  padding: 20px;
  margin: 20px;
}

.product＿list .item h2 {
  margin-bottom: 16px;
}

.product＿list .item:hover {
  border: 1px solid #222;
}

.show {
  border: 2px solid blue;
  padding: 20px;
}

.bold {
  border: 3px solid;
  font-weight: 900;
}

<ul class="product＿list">
  <li class="item">
    <h2>coke</h2>
    <p>$100</p>
  </li>
  <li class="item">
    <h2>beef</h2>
    <p>$600</p>
  </li>
</ul>

<h2 class="show">Your food of choice is <span class="plan"></span>The total price is<span class="price"></span></h2>

dippas · Accepted Answer · 2022-07-27 02:34:01Z

You need to toggle the class, you can do that by removing it from every item and only setting it to the selected one:

item.forEach(el => el.classList.remove('active'))
e.currentTarget.classList.add('active')

Also you have a CSS specificity issue:

when using only .bold, the border would be overriden by .product＿list .item

Note, try using currentTarget

const plan = document.querySelector('.plan');
const price = document.querySelector('.price');
const item = document.querySelectorAll('.item');

function showplan(e) {
  const target = e.currentTarget;
  const closestLi = target.closest('li');
  const planSelected = closestLi.querySelector('h2');
  const priceSelected = closestLi.querySelector('p');

  item.forEach(el => el.classList.remove('active'))
  target.classList.add('active')
  plan.textContent = planSelected.textContent;
  price.textContent = priceSelected.textContent;
}

item.forEach(el => el.addEventListener('click', showplan));

@charset "UTF-8";
.product＿list {
  display: flex;
}

.product＿list .item {
  border: 1px solid #ccc;
  border-radius: 6px;
  text-align: center;
  padding: 20px;
  margin: 20px;
}

.product＿list .item h2 {
  margin-bottom: 16px;
}

.product＿list .item:hover,
{
  border: 1px solid #222;
}

.product＿list .active {
  border: 3px solid red;
  font-weight: 900;
  color: red;
}

.show {
  border: 2px solid blue;
  padding: 20px;
}

<ul class="product＿list">
  <li class="item">
    <h2>coke</h2>
    <p>$100</p>
  </li>
  <li class="item">
    <h2>beef</h2>
    <p>$600</p>
  </li>
</ul>

<h2 class="show">Your food of choice is <span class="plan"></span>The total price is<span class="price"></span></h2>

huoguo32 · Accepted Answer · 2022-07-27 02:28:43Z

1

How to add CSS after click through javascript and remove it if not clicked?

Suppose we have a class"item",we want change "h1"

add class:
e.currentTarget.classList.add('item')

remove class:
e.currentTarget.classList.remove('item')

toggle class:
e.currentTarget.classList.toggle('item')

toggle means: (If h1 has this class,remove,if not,add)

edited Jul 27, 2022 at 2:28

answered Jul 27, 2022 at 2:18

huoguo32

671 gold badge1 silver badge7 bronze badges

Comments

user18101811 · Accepted Answer · 2022-07-27 03:02:15Z

With jQuery, two :radios and their corresponding labels:

var $plan = $('.plan');
var $price = $('.price');
var $item = $('.item');

$('.item').on('click', showplan);

function showplan(e) {
  const plan = $(this).find('h2').text();
  const price = $(this).find('p').text();
  
  $plan.text(plan);
  $price.text(price);
}

@charset "UTF-8";
.product＿list {
  display: flex;
}

.product＿list .item {
  border: 1px solid #ccc;
  border-radius: 6px;
  text-align: center;
  padding: 20px;
  margin: 20px;
  cursor: pointer;
}

.product＿list input {
  display: none;
}

.product＿list .item h2 {
  margin-bottom: 16px;
}

.product＿list .item:hover {
  border: 1px solid #222;
}

.show {
  border: 2px solid blue;
  padding: 20px;
}

.product＿list input:checked + label {
  outline: 2px solid black; /* Prevent jumping. */
  border: 1px solid black;
  font-weight: 900;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product＿list">
  <input type="radio" name="product" id="coke">
  <label class="item" for="coke">
    <h2>coke</h2>
    <p>$100</p>
  </label>
  <input type="radio" name="product" id="beef">
  <label class="item" for="beef">
    <h2>beef</h2>
    <p>$600</p>
  </label>
</div>

<h2 class="show">Your food of choice is <span class="plan">?</span>. The total price is <span class="price">?</span>.</h2>

Collectives™ on Stack Overflow

How to add CSS after click through javascript and remove it if not clicked

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related