Ok so I have a list of buttons like so:
“`
<div class=”bottominner intelbottom” id=”intelbottom”>
<ul class=”intellistul”>
<li class=”intellist”><div class=”inteltext”><p>i5 9600k</p><p class=”price”>$244.77</p></div><button class=”selectbutton”>Select</button></li>
<li class=”intellist”><div class=”inteltext”><p>i7 9700k</p><p class=”price”>$435.00</p></div><button class=”selectbutton”>Select</button></li>
<li class=”intellist”><div class=”inteltext”><p>i3 12100</p><p class=”price”>$129.98</p></div><button class=”selectbutton”>Select</button></li>
<li class=”intellist”><div class=”inteltext”><p>i5 12600k</p><p class=”price”>$277.99</p></div><button class=”selectbutton”>Select</button></li>
<li class=”intellist”><div class=”inteltext”><p>i7 12700k</p><p class=”price”>$399.99</p></div><button class=”selectbutton”>Select</button></li>
</ul>
</div>
<div class=”bottominner amdbottom” id=”amdbottom”>
<ul class=”amdlistul”>
<li class=”amdlist”><div class=”amdtext”><p>Ryzen 5 3600</p><p class=”price”>$147.89</p></div><button class=”selectbutton”>Select</button></li>
<li class=”amdlist”><div class=”amdtext”><p>Ryzen 7 3700x</p><p class=”price”>$265.00</p></div><button class=”selectbutton”>Select</button></li>
<li class=”amdlist”><div class=”amdtext”><p>Ryzen 9 3900x</p><p class=”price”>$360.00</p></div><button class=”selectbutton”>Select</button></li>
<li class=”amdlist”><div class=”amdtext”><p>Ryzen 7 5800x</p><p class=”price”>$257.00</p></div><button class=”selectbutton”>Select</button></li>
<li class=”amdlist”><div class=”amdtext”><p>Ryzen 9 5950x</p><p class=”price”>$546.73</p></div><button class=”selectbutton”>Select</button></li>
</ul>
</div>
And there are buttons with the selectbutton class on each row. I want to make it so if you click a button, it will change that button to a selected button where the text changes to Selected rather than select, and maybe some design properties change. Now, if the user changes their mind, the selected button would change to the default, and the new one would change to a selected one. All the elements are in a ul, and there are 2 separate uls.
I’ve Hosted A Demo Version On:
This form won’t store your data – Just in case you were worried about that.
ok bye
</>
</C>) won't work reliably when posting code, particularly your indentation gets lost. You better use code tags: <C>
your code here
```<i>
</i> <div class="bottominner intelbottom" id="intelbottom">
<ul class="intellistul">
<li class="intellist">
<input type="radio" name="rb-intel" id="i5-9600k">
<label for="i5-9600k">i5 9600k</label>
</li>
<li class="intellist">
<input type="radio" name="rb-intel" id="i7-9700k">
<label for="i7-9700k">i7 9700k</label>
</li>
<li class="intellist">
<input type="radio" name="rb-intel" id="i3-12100">
<label for="i3-12100">i3 12100</label>
</li>
<li class="intellist">
<input type="radio" name="rb-intel" id="i5-12600k">
<label for="i5-12600k">i5 12600k</label>
</li>
<li class="intellist">
<input type="radio" name="rb-intel" id="i7-12700k">
<label for="i7-12700k">i7 12700k</label>
</li>
</ul>
</div><i>
</i>
`</CODE>
CSS:
<CODE>
`<i>
</i> /* Basic status of pseudo element ::after
Content is "select" */
.intellist label::after {
content: 'select';
margin-left: 1em;
}
/* Status of pseudo element ::after
when being selected
Content is "selected" */
.intellist input:checked~label::after {
content: 'selected';
}
/* hide radio buttons */
.intellistul input {
display: none;
}<i>
</i>
``
``<i>
</i> <div class="bottominner intelbottom" id="intelbottom">
<ul class="intellistul">
<li class="intellist">
<input type="radio" name="rb-intel" id="i5-9600k" value="i5 9600k">
<label for="i5-9600k">i5 9600k</label>
</li>
<li class="intellist">
<input type="radio" name="rb-intel" id="i7-9700k" value="i7 9700k">
<label for="i7-9700k">i7 9700k</label>
</li>
<li class="intellist">
<input type="radio" name="rb-intel" id="i3-12100" value="i3 12100">
<label for="i3-12100">i3 12100</label>
</li>
<li class="intellist">
<input type="radio" name="rb-intel" id="i5-12600k" value="i5 12600k">
<label for="i5-12600k">i5 12600k</label>
</li>
<li class="intellist">
<input type="radio" name="rb-intel" id="i7-12700k" value="i7 12700k">
<label for="i7-12700k">i7 12700k</label>
</li>
</ul>
</div><i>
</i>
`</CODE>
Then add an event listener and read the value when the status of a radio button has changed:
<CODE>
`<i>
</i> // Add an event listener to the window object
// that fires every time a status is changed:
window.addEventListener('change', event => {
// Did the status of a radio button for selecting a processor change?
if (event.target.matches('.intellist input')) {
// Get the value of the radio button that is currently checked:
const checkedRb = document.querySelector('.intellist input:checked');
const processor = checkedRb.value;
// Now do anything you like with this value
console.log(processor);
}
});<i>
</i>
`</CODE>
Place the script below the HTML, right before the closing <C>
</body>
`.
<input type="radio" name="rb-intel" id="i5-9600k" value="i5 9600k">
</C><br/>
Use the same name for both lists and name it, e. g. <C>
name="rb-processor"
` <div class="bottominner intelbottom" id="intelbottom">
<ul class="intellistul">
<li class="intellist"> <input type="radio" name="rb-proccessor" id="i5-9600k" value="i5 9600k">
<label for="i5-9600k">i5 9600k <p class="price">$244.77</p> <p class="reccommended">Reccommended</p></label></li>
<li class="intellist">
<input type="radio" name="rb-proccessor" id="i7-9700k" value="i7 9700k">>
<label for="i7-9700k">i7 9700k<p class="price">$435.00</p><p class="reccommended">Reccommended</p></label>
</li>
<li class="intellist">
<input type="radio" name="rb-proccessor" id="i3-12100" value="i3 12100">>
<label for="i3-12100">i3 12100<p class="price">$129.98</p><p class="reccommended">Reccommended</p></label>
</li>
<li class="intellist"> <input type="radio" name="rb-proccessor" id="i5-12600k" value="i5 12600k"> <label for="i5-12600k">i5 12600k<p class="price">$277.99</p><p class="reccommended">Reccommended</p></label> </li>
<li class="intellist"> <input type="radio" name="rb-proccessor" id="i7-12700k" value="i7 12700k"> <label for="i7-12700k">i7 12700k<p class="price">$399.99</p><p class="reccommended">Reccommended</p></label> </li>
</ul>
</div>
<div class="bottominner amdbottom" id="amdbottom">
<ul class="amdlistul">
<li class="amdlist"> <input type="radio" name="rb-proccessor" id="Ryzen 5 3600" value="Ryzen 5 3600"> <label for="Ryzen 5 3600">Ryzen 5 3600<p class="price">$147.89</p><p class="reccommended">Reccommended</p></label></li>
<li class="amdlist"> <input type="radio" name="rb-proccessor" id="Ryzen 7 3700x" value="Ryzen 7 3700x"> <label for="Ryzen 7 3700x">Ryzen 7 3700x<p class="price">$265.00</p><p class="reccommended">Reccommended</p></label></li>
<li class="amdlist"> <input type="radio" name="rb-proccessor" id="Ryzen 9 3900x" value="Ryzen 9 3900x"> <label for="Ryzen 9 3900x">Ryzen 9 3900x<p class="price">$360.00</p><p class="reccommended">Reccommended</p></label></li>
<li class="amdlist"> <input type="radio" name="rb-proccessor" id="Ryzen 7 5800x" value="Ryzen 7 5800x"> <label for="Ryzen 7 5800x">Ryzen 7 5800x<p class="price">$257.00</p><p class="reccommended">Reccommended</p></label></li>
<li class="amdlist"> <input type="radio" name="rb-proccessor" id="Ryzen 9 5950x" value="Ryzen 9 5950x"> <label for="Ryzen 9 5950x">Ryzen 9 5950x<p class="price">$546.73</p><p class="reccommended">Reccommended</p></label></li>
</ul>
</div>
``<i>
</i> // Add an event listener to the window object
// that fires every time a status is changed:
window.addEventListener('change', event => {
// Did the status of a radio button for selecting a processor change?
if (event.target.matches('.processor-list input')) {
// Get the value of the radio button that is currently checked:
const checkedRb = document.querySelector('.intellist input:checked');
const processor = checkedRb.value;
// Now do anything you like with this value
console.log(processor);
}
});
// Reference limit for the price:
const limit = 300;
function markClosest() {
let
closestAboveEle = null,
closestBelowEle = null,
closestReccommendedEleAbove = null,
closestReccommendedEleBelow = null,
closestAbovePrice = 9999,
closestBelowPrice = 0;
// Loop through all labels:
document.querySelectorAll('.processor-list label').forEach((item, idx) => {
const
// Element containing the price:
priceEle = item.querySelector('.price'),
price = parseFloat(priceEle.textContent.replace('$', '')),
// Element containing the marker "reccommended":
reccommendedEle = item.querySelector('.reccommended');
// Is the price below the limit?
if (price < limit) {
// Is the price above the closest price below?
if (price > closestBelowPrice) {
// Note elements and price for "below":
closestBelowPrice = price;
closestBelowEle = priceEle;
closestReccommendedEleBelow = reccommendedEle;
}
} else {
if (price < closestAbovePrice) {
closestAbovePrice = price;
closestAboveEle = priceEle;
closestReccommendedEleAbove = reccommendedEle;
}
}
reccommendedEle.classList.remove('visi');
});
// Add class "visi" for the markers of the closest elements:
if (closestReccommendedEleAbove) closestReccommendedEleAbove.classList.add('visi');
if (closestReccommendedEleBelow) closestReccommendedEleBelow.classList.add('visi');
}
markClosest();<i>
</i>
`</CODE>
Additional CSS:
<CODE>
`<i>
</i> /* Hide recommended marker if class "visi" is not set: */
.processor-list .reccommended:not(.visi) {
display: none;
}<i>
</i>
`</CODE>
In order to make the code clear and simple I added the class "processor-list" to each list item:
<CODE>
`<i>
</i> <li class="intellist processor-list"> <input type="radio" name="rb-proccessor" id="i5-9600k"<i>
</i>
``
>I have the variable CPUp2 which has a recommended price already calculated.
limit
</C> is equivalent to <C>
CPUp2
</C>. Just change the name in my code.<br/>
If my code is not working for you, maybe I missed something important to post. This is my complete Code:
<CODE>
`<i>
</i><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
/* Basic status of pseudo element ::after
Content is "select" */
.intellist label::after {
content: 'select';
margin-left: 1em;
}
/* Status of pseudo element ::after
when being selected
Content is "selected" */
.intellist input:checked~label::after {
content: 'selected';
}
/* hide radio buttons */
.processor-list input {
display: none;
}
.processor-list label {
display: flex;
}
.processor-list * {
margin: 0 0.5em;
padding: 0;
}
/* Hide recommended marker if class "visi" is not set: */
.processor-list .reccommended:not(.visi) {
display: none;
}
</style>
</head>
<body>
<div class="bottominner intelbottom" id="intelbottom">
<ul class="intellistul">
<li class="intellist processor-list"> <input type="radio" name="rb-proccessor" id="i5-9600k"
value="i5 9600k">
<label for="i5-9600k">i5 9600k <p class="price">$244.77</p>
<p class="reccommended">Reccommended</p>
</label>
</li>
<li class="intellist processor-list">
<input type="radio" name="rb-proccessor" id="i7-9700k" value="i7 9700k">>
<label for="i7-9700k">i7 9700k<p class="price">$435.00</p>
<p class="reccommended">Reccommended</p>
</label>
</li>
<li class="intellist processor-list">
<input type="radio" name="rb-proccessor" id="i3-12100" value="i3 12100">>
<label for="i3-12100">i3 12100<p class="price">$129.98</p>
<p class="reccommended">Reccommended</p>
</label>
</li>
<li class="intellist processor-list"> <input type="radio" name="rb-proccessor" id="i5-12600k"
value="i5 12600k"> <label for="i5-12600k">i5 12600k<p class="price">$277.99</p>
<p class="reccommended">Reccommended</p>
</label> </li>
<li class="intellist processor-list"> <input type="radio" name="rb-proccessor" id="i7-12700k"
value="i7 12700k"> <label for="i7-12700k">i7 12700k<p class="price">$399.99</p>
<p class="reccommended">Reccommended</p>
</label> </li>
</ul>
</div>
<div class="bottominner amdbottom" id="amdbottom">
<ul class="amdlistul">
<li class="intellist processor-list"> <input type="radio" name="rb-proccessor" id="Ryzen 5 3600"
value="Ryzen 5 3600"> <label for="Ryzen 5 3600">Ryzen 5 3600<p class="price">$147.89</p>
<p class="reccommended">Reccommended</p>
</label></li>
<li class="intellist processor-list"> <input type="radio" name="rb-proccessor" id="Ryzen 7 3700x"
value="Ryzen 7 3700x">
<label for="Ryzen 7 3700x">Ryzen 7 3700x<p class="price">$265.00</p>
<p class="reccommended">Reccommended</p>
</label>
</li>
<li class="intellist processor-list"> <input type="radio" name="rb-proccessor" id="Ryzen 9 3900x"
value="Ryzen 9 3900x">
<label for="Ryzen 9 3900x">Ryzen 9 3900x<p class="price">$360.00</p>
<p class="reccommended">Reccommended</p>
</label>
</li>
<li class="intellist processor-list"> <input type="radio" name="rb-proccessor" id="Ryzen 7 5800x"
value="Ryzen 7 5800x">
<label for="Ryzen 7 5800x">Ryzen 7 5800x<p class="price">$257.00</p>
<p class="reccommended">Reccommended</p>
</label>
</li>
<li class="intellist processor-list"> <input type="radio" name="rb-proccessor" id="Ryzen 9 5950x"
value="Ryzen 9 5950x">
<label for="Ryzen 9 5950x">Ryzen 9 5950x<p class="price">$546.73</p>
<p class="reccommended">Reccommended</p>
</label>
</li>
</ul>
</div>
<_script>
// Add an event listener to the window object
// that fires every time a status is changed:
window.addEventListener('change', event => {
// Did the status of a radio button for selecting a processor change?
if (event.target.matches('.processor-list input')) {
// Get the value of the radio button that is currently checked:
const checkedRb = document.querySelector('.intellist input:checked');
const processor = checkedRb.value;
// Now do anything you like with this value
console.log(processor);
}
});
// Reference limit for the price:
const limit = 300;
function markClosest() {
let
closestAboveEle = null,
closestBelowEle = null,
closestReccommendedEleAbove = null,
closestReccommendedEleBelow = null,
closestAbovePrice = 9999,
closestBelowPrice = 0;
// Loop through all labels:
document.querySelectorAll('.processor-list label').forEach((item, idx) => {
const
// Element containing the price:
priceEle = item.querySelector('.price'),
price = parseFloat(priceEle.textContent.replace('$', '')),
// Element containing the marker "reccommended":
reccommendedEle = item.querySelector('.reccommended');
// Is the price below the limit?
if (price < limit) {
// Is the price above the closest price below?
if (price > closestBelowPrice) {
// Note elements and price for "below":
closestBelowPrice = price;
closestBelowEle = priceEle;
closestReccommendedEleBelow = reccommendedEle;
}
} else {
if (price < closestAbovePrice) {
closestAbovePrice = price;
closestAboveEle = priceEle;
closestReccommendedEleAbove = reccommendedEle;
}
}
reccommendedEle.classList.remove('visi');
});
// Add class "visi" for the markers of the closest elements:
if (closestReccommendedEleAbove) closestReccommendedEleAbove.classList.add('visi');
if (closestReccommendedEleBelow) closestReccommendedEleBelow.classList.add('visi');
}
markClosest();
<__/script>
</body>
</html><i>
</i>
``window.addEventListener('change', event => {
if (event.target.matches('.intellist input')) {
let checkedRb = document.querySelector('.intellist input:checked');
processor = checkedRb.value;
console.log(processor);
}
if (event.target.matches('.amdlist input')) {
checkedRb = document.querySelector('.amdlist input:checked');
processor = checkedRb.value;
console.log(processor);
}
})
<i> </i>// Reference limit for the price:
<i> </i>const limit = 300;
<i> </i>function markClosest() {
<i> </i> let
<i> </i> closestAboveEle = null,
<i> </i> closestBelowEle = null,
<i> </i> closestReccommendedEleAbove = null,
<i> </i> closestReccommendedEleBelow = null,
<i> </i> closestAbovePrice = 9999,
<i> </i> closestBelowPrice = 0;
<i> </i> // Loop through all labels:
<i> </i> document.querySelectorAll('.processor-list label').forEach((item, idx) => {
<i> </i> const
<i> </i> // Element containing the price:
<i> </i> priceEle = item.querySelector('.price'),
<i> </i> price = parseFloat(priceEle.textContent.replace('$', '')),
<i> </i> // Element containing the marker "reccommended":
<i> </i> reccommendedEle = item.querySelector('.reccommended');
<i> </i> // Is the price below the limit?
<i> </i> if (price < limit) {
<i> </i> // Is the price above the closest price below?
<i> </i> if (price > closestBelowPrice) {
<i> </i> // Note elements and price for "below":
<i> </i> closestBelowPrice = price;
<i> </i> closestBelowEle = priceEle;
<i> </i> closestReccommendedEleBelow = reccommendedEle;
<i> </i> }
<i> </i> } else {
<i> </i> if (price < closestAbovePrice) {
<i> </i> closestAbovePrice = price;
<i> </i> closestAboveEle = priceEle;
<i> </i> closestReccommendedEleAbove = reccommendedEle;
<i> </i> }
<i> </i> }
<i> </i> reccommendedEle.classList.remove('visi');
<i> </i> });
<i> </i> // Add class "visi" for the markers of the closest elements:
<i> </i> if (closestReccommendedEleAbove) closestReccommendedEleAbove.classList.add('visi');
<i> </i> if (closestReccommendedEleBelow) closestReccommendedEleBelow.classList.add('visi');
<i> </i>}
<i> </i>markClosest();
<div class="bottominner intelbottom" id="intelbottom">
<ul class="intellistul">
<li class="intellist processorlist"> <input type="radio" name="rb-proccessor" id="i5-9600k" value="i5 9600k">
<label for="i5-9600k">i5 9600k <p class="price">$244.77</p> <p class="reccommended">Reccommended</p></label></li>
<li class="intellist processorlist">
<input type="radio" name="rb-proccessor" id="i7-9700k" value="i7 9700k">>
<label for="i7-9700k">i7 9700k<p class="price">$435.00</p><p class="reccommended">Reccommended</p></label>
</li>
<li class="intellist processorlist">
<input type="radio" name="rb-proccessor" id="i3-12100" value="i3 12100">>
<label for="i3-12100">i3 12100<p class="price">$129.98</p><p class="reccommended">Reccommended</p></label>
</li>
<li class="intellist processorlist"> <input type="radio" name="rb-proccessor" id="i5-12600k" value="i5 12600k"> <label for="i5-12600k">i5 12600k<p class="price">$277.99</p><p class="reccommended">Reccommended</p></label> </li>
<li class="intellist processorlist"> <input type="radio" name="rb-proccessor" id="i7-12700k" value="i7 12700k"> <label for="i7-12700k">i7 12700k<p class="price">$399.99</p><p class="reccommended">Reccommended</p></label> </li>
</ul>
</div>
<div class="bottominner amdbottom" id="amdbottom">
<ul class="amdlistul">
<li class="amdlist processorlist"> <input type="radio" name="rb-proccessor" id="Ryzen 5 3600" value="Ryzen 5 3600"> <label for="Ryzen 5 3600">Ryzen 5 3600<p class="price">$147.89</p><p class="reccommended">Reccommended</p></label></li>
<li class="amdlist processorlist"> <input type="radio" name="rb-proccessor" id="Ryzen 7 3700x" value="Ryzen 7 3700x"> <label for="Ryzen 7 3700x">Ryzen 7 3700x<p class="price">$265.00</p><p class="reccommended">Reccommended</p></label></li>
<li class="amdlist processorlist"> <input type="radio" name="rb-proccessor" id="Ryzen 9 3900x" value="Ryzen 9 3900x"> <label for="Ryzen 9 3900x">Ryzen 9 3900x<p class="price">$360.00</p><p class="reccommended">Reccommended</p></label></li>
<li class="amdlist processorlist"> <input type="radio" name="rb-proccessor" id="Ryzen 7 5800x" value="Ryzen 7 5800x"> <label for="Ryzen 7 5800x">Ryzen 7 5800x<p class="price">$257.00</p><p class="reccommended">Reccommended</p></label></li>
<li class="amdlist processorlist"> <input type="radio" name="rb-proccessor" id="Ryzen 9 5950x" value="Ryzen 9 5950x"> <label for="Ryzen 9 5950x">Ryzen 9 5950x<p class="price">$546.73</p><p class="reccommended">Reccommended</p></label></li>
</ul>
</div>
document.querySelectorAll('.processor-list label').forEach((item, idx) => {
</C>
<C>
<li class="amdlist processorlist">
```<i>
</i> // Mark processors, that have the closest price, as recommended:
function markClosest(theClass, limit) {
let
closestAboveEle = null,
closestBelowEle = null,
closestReccommendedEleAbove = null,
closestReccommendedEleBelow = null,
closestAbovePrice = 9999,
closestBelowPrice = 0;
// Loop through all labels:
document.querySelectorAll('.' + theClass + ' label').forEach((item, idx) => {
const
// Element containing the price:
priceEle = item.querySelector('.price'),
price = parseFloat(priceEle.textContent.replace('$', '')),
// Element containing the marker "reccommended":
reccommendedEle = item.querySelector('.reccommended');
// Is the price below the limit?
if (price < limit) {
// Is the price above the closest price below?
if (price > closestBelowPrice) {
// Note elements and price for "below":
closestBelowPrice = price;
closestBelowEle = priceEle;
closestReccommendedEleBelow = reccommendedEle;
}
} else {
if (price < closestAbovePrice) {
closestAbovePrice = price;
closestAboveEle = priceEle;
closestReccommendedEleAbove = reccommendedEle;
}
}
reccommendedEle.classList.remove('visi');
});
// Add class "visi" for the markers of the closest elements:
if (closestReccommendedEleAbove) closestReccommendedEleAbove.classList.add('visi');
if (closestReccommendedEleBelow) closestReccommendedEleBelow.classList.add('visi');
}
markClosest('intellist', 300);
markClosest('amdlist', 300);<i>
</i>
`</CODE>
The HTML in my testfile was faulty, the class "intellist" was applied to all processors. This works for me:
<CODE>
`<i>
</i> <div class="bottominner intelbottom" id="intelbottom">
<ul class="intellistul">
<li class="intellist processor-list"> <input type="radio" name="rb-proccessor" id="i5-9600k"
value="i5 9600k">
<label for="i5-9600k">i5 9600k <p class="price">$244.77</p>
<p class="reccommended">Reccommended</p>
</label>
</li>
<li class="intellist processor-list">
<input type="radio" name="rb-proccessor" id="i7-9700k" value="i7 9700k">>
<label for="i7-9700k">i7 9700k<p class="price">$435.00</p>
<p class="reccommended">Reccommended</p>
</label>
</li>
<li class="intellist processor-list">
<input type="radio" name="rb-proccessor" id="i3-12100" value="i3 12100">>
<label for="i3-12100">i3 12100<p class="price">$129.98</p>
<p class="reccommended">Reccommended</p>
</label>
</li>
<li class="intellist processor-list"> <input type="radio" name="rb-proccessor" id="i5-12600k"
value="i5 12600k"> <label for="i5-12600k">i5 12600k<p class="price">$277.99</p>
<p class="reccommended">Reccommended</p>
</label> </li>
<li class="intellist processor-list"> <input type="radio" name="rb-proccessor" id="i7-12700k"
value="i7 12700k"> <label for="i7-12700k">i7 12700k<p class="price">$399.99</p>
<p class="reccommended">Reccommended</p>
</label> </li>
</ul>
</div>
<div class="bottominner amdbottom" id="amdbottom">
<ul class="amdlistul">
<li class="amdlist processor-list"> <input type="radio" name="rb-proccessor" id="Ryzen 5 3600"
value="Ryzen 5 3600"> <label for="Ryzen 5 3600">Ryzen 5 3600<p class="price">$147.89</p>
<p class="reccommended">Reccommended</p>
</label></li>
<li class="amdlist processor-list"> <input type="radio" name="rb-proccessor" id="Ryzen 7 3700x"
value="Ryzen 7 3700x">
<label for="Ryzen 7 3700x">Ryzen 7 3700x<p class="price">$265.00</p>
<p class="reccommended">Reccommended</p>
</label>
</li>
<li class="amdlist processor-list"> <input type="radio" name="rb-proccessor" id="Ryzen 9 3900x"
value="Ryzen 9 3900x">
<label for="Ryzen 9 3900x">Ryzen 9 3900x<p class="price">$360.00</p>
<p class="reccommended">Reccommended</p>
</label>
</li>
<li class="amdlist processor-list"> <input type="radio" name="rb-proccessor" id="Ryzen 7 5800x"
value="Ryzen 7 5800x">
<label for="Ryzen 7 5800x">Ryzen 7 5800x<p class="price">$257.00</p>
<p class="reccommended">Reccommended</p>
</label>
</li>
<li class="amdlist processor-list"> <input type="radio" name="rb-proccessor" id="Ryzen 9 5950x"
value="Ryzen 9 5950x">
<label for="Ryzen 9 5950x">Ryzen 9 5950x<p class="price">$546.73</p>
<p class="reccommended">Reccommended</p>
</label>
</li>
</ul>
</div><i>
</i>
``
``<i>
</i> // Add an event listener to the window object
// that fires every time a status is changed:
window.addEventListener('change', event => {
// Did the status of a radio button for selecting a processor change?
if (event.target.matches('.processor-list input')) {
// Get the value of the radio button that is currently checked:
const checkedRb = document.querySelector('.processor-list input:checked');
const processor = checkedRb.value;
// Now do anything you like with this value
console.log(processor);
}
});
// Mark processors, that have the closest price, as recommended:
function markClosest(
theClass, // The class of the ul element
limit // The limit for the price
) {
let
closestAboveEle = null,
closestBelowEle = null,
closestAbovePrice = 9999,
closestBelowPrice = 0;
// Loop through all li elements:
document.querySelectorAll('.' + theClass + ' li').forEach((currentLi, idx) => {
const
// Element containing the price:
priceEle = currentLi.querySelector('.price'),
price = parseFloat(priceEle.textContent.replace('$', '')),
reccommendedEle = currentLi.querySelector('.reccommended');
// Is the price below the limit?
if (price < limit) {
// Is the price above the closest price below?
if (price > closestBelowPrice) {
// Note elements and price for "below":
closestBelowPrice = price;
closestBelowEle = currentLi;
}
} else {
if (price < closestAbovePrice) {
closestAbovePrice = price;
closestAboveEle = currentLi;
}
}
reccommendedEle.classList.remove('visi');
});
// Add class "visi" for the markers of the closest elements
// and move these elements to the top of the list:
const parentUl = document.querySelector('.' + theClass).closest('ul');
if (closestAboveEle) {
const closestReccommendedEleAbove = closestAboveEle.querySelector('.reccommended');
closestReccommendedEleAbove.classList.add('visi');
parentUl.insertAdjacentElement('afterbegin', closestAboveEle);
}
if (closestBelowEle) {
const closestReccommendedEleBelow = closestBelowEle.querySelector('.reccommended');
closestReccommendedEleBelow.classList.add('visi');
parentUl.insertAdjacentElement('afterbegin', closestBelowEle);
}
}
markClosest('intellistul', 300);
markClosest('amdlistul', 300);<i>
</i>
``
>the recommend is fixed when you can scroll in the box, it doesn't scroll with the other elements.
<div class="productContainer">
<div class="bottominner motherbottom" id="motherbottom">
<ul class="listul">
<li class="asuslist mother-list list"> <input type="radio" name="rb-mother" id="Ryzen 5 3600" value="Ryzen 5 3600"> <label for="Ryzen 5 3600">Ryzen 5 3600<p class="price">$147.89</p><p class="reccommended">Reccommended</p></label></li>
<li class="asuslist mother-list list"> <input type="radio" name="rb-mother" id="Ryzen 5 3600" value="Ryzen 5 3600"> <label for="Ryzen 5 3600">Ryzen 5 3600<p class="price">$147.89</p><p class="reccommended">Reccommended</p></label></li>
<li class="asuslist mother-list list"> <input type="radio" name="rb-mother" id="Ryzen 5 3600" value="Ryzen 5 3600"> <label for="Ryzen 5 3600">Ryzen 5 3600<p class="price">$147.89</p><p class="reccommended">Reccommended</p></label></li>
<li class="asuslist mother-list list"> <input type="radio" name="rb-mother" id="Ryzen 5 3600" value="Ryzen 5 3600"> <label for="Ryzen 5 3600">Ryzen 5 3600<p class="price">$147.89</p><p class="reccommended">Reccommended</p></label></li>
<li class="asuslist mother-list list"> <input type="radio" name="rb-mother" id="Ryzen 5 3600" value="Ryzen 5 3600"> <label for="Ryzen 5 3600">Ryzen 5 3600<p class="price">$147.89</p><p class="reccommended">Reccommended</p></label></li>
</ul>
</div>
</div>
``<i>
</i> // Add an event listener to the window object
// that fires every time a status is changed:
window.addEventListener('change', event => {
// Did the status of a radio button for selecting a processor change?
// if (event.target.matches('.processor-list input')) {
if (event.target.matches('.mother-list input')) {
// Get the value of the radio button that is currently checked:
const checkedRb = document.querySelector('.mother-list input:checked');
const processor = checkedRb.value;
// Now do anything you like with this value
console.log(processor);
}
});<i>
</i>
`</CODE>
Again it's advisable to use a funktion, doing so you will not have to multiply the code:
<CODE>
`<i>
</i> // Add an event listener to the window object
// that fires every time a status is changed:
function registerIt(theClass) {
window.addEventListener('change', event => {
// Did the status of a radio button for selecting a component change?
if (event.target.matches('.' + theClass + ' input')) {
// Get the value of the radio button that is currently checked:
const checkedRb = document.querySelector('.' + theClass + ' input:checked');
const processor = checkedRb.value;
// Now do anything you like with this value
console.log(processor);
}
});
}<i>
</i>
``
``<i>
</i> /* Basic status of pseudo element ::after
Content is "select" */
.asuslist label::after {
content: 'select';
margin-left: 1em;
}
/* Status of pseudo element ::after
when being selected
Content is "selected" */
.asuslist input:checked~label::after {
content: 'selected';
}
/* hide radio buttons */
.asuslist input {
display: none;
}<i>
</i>
``
``<i>
</i> <div class="productContainer">
<div class="bottominner motherbottom" id="motherbottom">
<ul class="listul">
<li class="asuslist mother-list list"> <input type="radio" name="rb-mother" id="Ryzen 5 3600" value="Ryzen 5 3600"> <label for="Ryzen 5 3600">Ryzen 5 3600<p class="price">$147.89</p>
<p class="reccommended">Reccommended</p>
</label></li>
<li class="asuslist mother-list list"> <input type="radio" name="rb-mother" id="Ryzen 5 3600" value="Ryzen 5 3600"> <label for="Ryzen 5 3600">Ryzen 5 3600<p class="price">$147.89</p>
<p class="reccommended">Reccommended</p>
</label></li>
<li class="asuslist mother-list list"> <input type="radio" name="rb-mother" id="Ryzen 5 3600" value="Ryzen 5 3600"> <label for="Ryzen 5 3600">Ryzen 5 3600<p class="price">$147.89</p>
<p class="reccommended">Reccommended</p>
</label></li>
<li class="asuslist mother-list list"> <input type="radio" name="rb-mother" id="Ryzen 5 3600" value="Ryzen 5 3600"> <label for="Ryzen 5 3600">Ryzen 5 3600<p class="price">$147.89</p>
<p class="reccommended">Reccommended</p>
</label></li>
<li class="asuslist mother-list list"> <input type="radio" name="rb-mother" id="Ryzen 5 3600" value="Ryzen 5 3600"> <label for="Ryzen 5 3600">Ryzen 5 3600<p class="price">$147.89</p>
<p class="reccommended">Reccommended</p>
</label></li>
</ul>
</div>
</div><i>
</i>
`</CODE>
All of the items are having the same ID and for-attribute. Change it like so:
<CODE>
`<i>
</i> <div class="productContainer">
<div class="bottominner motherbottom" id="motherbottom">
<ul class="listul">
<li class="asuslist mother-list list"> <input type="radio" name="rb-mother" id="asus-1" value="Ryzen 5 3600"> <label for="asus-1">Ryzen 5 3600<p class="price">$147.89</p>
<p class="reccommended">Reccommended</p>
</label></li>
<li class="asuslist mother-list list"> <input type="radio" name="rb-mother" id="asus-2" value="Ryzen 5 3600"> <label for="asus-2">Ryzen 5 3600<p class="price">$147.89</p>
<p class="reccommended">Reccommended</p>
</label></li>
<li class="asuslist mother-list list"> <input type="radio" name="rb-mother" id="asus-3" value="Ryzen 5 3600"> <label for="asus-3">Ryzen 5 3600<p class="price">$147.89</p>
<p class="reccommended">Reccommended</p>
</label></li>
<li class="asuslist mother-list list"> <input type="radio" name="rb-mother" id="asus-4" value="Ryzen 5 3600"> <label for="asus-4">Ryzen 5 3600<p class="price">$147.89</p>
<p class="reccommended">Reccommended</p>
</label></li>
<li class="asuslist mother-list list"> <input type="radio" name="rb-mother" id="asus-5" value="Ryzen 5 3600"> <label for="asus-5">Ryzen 5 3600<p class="price">$147.89</p>
<p class="reccommended">Reccommended</p>
</label></li>
</ul>
</div>
</div><i>
</i>
``
<div class="bottominner intelbottom" id="intelbottom">
<ul class="intellistul">
<li class="intellist">
<input type="radio" name="rb-intel" id="i5-9600k">
<label for="i5-9600k">i5 9600k</label>
</li>
<li class="intellist">
<input type="radio" name="rb-intel" id="i7-9700k">
<label for="i7-9700k">i7 9700k</label>
</li>
<li class="intellist">
<input type="radio" name="rb-intel" id="i3-12100">
<label for="i3-12100">i3 12100</label>
</li>
<li class="intellist">
<input type="radio" name="rb-intel" id="i5-12600k">
<label for="i5-12600k">i5 12600k</label>
</li>
<li class="intellist">
<input type="radio" name="rb-intel" id="i7-12700k">
<label for="i7-12700k">i7 12700k</label>
</li>
</ul>
</div>
markClosest("asuslistul", Motherboardp2);
`0.1.9 — BETA 9.26