/    Sign up×
Community /Pin to ProfileBookmark

How to make buttons that change but only when others? Not sure how to phrase

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: https://pc-helper-demo.vercel.app/ It will ask you a budget, you can put random numbers in between 750 and 10000 then it asks what you would use the PC for, you can just select a random checkbox, and the third page is where you can see all of the different options.

This form won’t store your data – Just in case you were worried about that.

ok bye

to post a comment
HTMLJavaScript

43 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumSep 22.2022 — Single backticks (probably created by the button `&lt;/&gt;</C>) won't work reliably when posting code, particularly your indentation gets lost. You better use code tags: <C>your code here` or triple backticks. I edited your posting accordingly.
Copy linkTweet thisAlerts:
@SempervivumSep 22.2022 — When using radio buttons and pseudo elements this can be done without javascript:

HTML:
``<i>
</i> &lt;div class="bottominner intelbottom" id="intelbottom"&gt;
&lt;ul class="intellistul"&gt;
&lt;li class="intellist"&gt;
&lt;input type="radio" name="rb-intel" id="i5-9600k"&gt;
&lt;label for="i5-9600k"&gt;i5 9600k&lt;/label&gt;
&lt;/li&gt;
&lt;li class="intellist"&gt;
&lt;input type="radio" name="rb-intel" id="i7-9700k"&gt;
&lt;label for="i7-9700k"&gt;i7 9700k&lt;/label&gt;
&lt;/li&gt;
&lt;li class="intellist"&gt;
&lt;input type="radio" name="rb-intel" id="i3-12100"&gt;
&lt;label for="i3-12100"&gt;i3 12100&lt;/label&gt;
&lt;/li&gt;
&lt;li class="intellist"&gt;
&lt;input type="radio" name="rb-intel" id="i5-12600k"&gt;
&lt;label for="i5-12600k"&gt;i5 12600k&lt;/label&gt;
&lt;/li&gt;
&lt;li class="intellist"&gt;
&lt;input type="radio" name="rb-intel" id="i7-12700k"&gt;
&lt;label for="i7-12700k"&gt;i7 12700k&lt;/label&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;<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 focused on function, feel free to beautify the elements according your needs.
Copy linkTweet thisAlerts:
@ProductionNerdauthorSep 22.2022 — @Sempervivum#1647308 Great, thank you, that will help so much. I definitely have no idea how to use radio buttons, but now I will look into it. I'll try to implement it later, however, because I cannot now. Also, Do you know how I might be able to get an output of it and assign it to a js variable?
Copy linkTweet thisAlerts:
@SempervivumSep 23.2022 — Add a value attribute to each radio button:
``<i>
</i> &lt;div class="bottominner intelbottom" id="intelbottom"&gt;
&lt;ul class="intellistul"&gt;
&lt;li class="intellist"&gt;
&lt;input type="radio" name="rb-intel" id="i5-9600k" value="i5 9600k"&gt;
&lt;label for="i5-9600k"&gt;i5 9600k&lt;/label&gt;
&lt;/li&gt;
&lt;li class="intellist"&gt;
&lt;input type="radio" name="rb-intel" id="i7-9700k" value="i7 9700k"&gt;
&lt;label for="i7-9700k"&gt;i7 9700k&lt;/label&gt;
&lt;/li&gt;
&lt;li class="intellist"&gt;
&lt;input type="radio" name="rb-intel" id="i3-12100" value="i3 12100"&gt;
&lt;label for="i3-12100"&gt;i3 12100&lt;/label&gt;
&lt;/li&gt;
&lt;li class="intellist"&gt;
&lt;input type="radio" name="rb-intel" id="i5-12600k" value="i5 12600k"&gt;
&lt;label for="i5-12600k"&gt;i5 12600k&lt;/label&gt;
&lt;/li&gt;
&lt;li class="intellist"&gt;
&lt;input type="radio" name="rb-intel" id="i7-12700k" value="i7 12700k"&gt;
&lt;label for="i7-12700k"&gt;i7 12700k&lt;/label&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;<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 =&gt; {
// 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>
&lt;/body&gt;`.
Copy linkTweet thisAlerts:
@ProductionNerdauthorSep 23.2022 — @Sempervivum#1647358 awesome thank you. The one issue I discovered however, is I have 2 different lists, that transition in between the too, I guess it’s easier to see in the website I posted first. So when you select a button in the first list and in the second, do you know how I can make it where you can just select one total?
Copy linkTweet thisAlerts:
@SempervivumSep 23.2022 — @ProductionNerd#1647373

That's easy: The radio buttons are grouped by their name:

`&lt;input type="radio" name="rb-intel" id="i5-9600k" value="i5 9600k"&gt;</C><br/>
Use the same name for both lists and name it, e. g. <C>
name="rb-processor"`
.
Copy linkTweet thisAlerts:
@ProductionNerdauthorSep 23.2022 — @Sempervivum#1647374 you learn something new every day I guess. Thank you so much!
Copy linkTweet thisAlerts:
@ProductionNerdauthorSep 25.2022 — @Sempervivum#1647374 Alright, I'm sorry to bother you again, but here is another question I had which I tried to get help but no one answered:

I have these 2 lists as you can see below:

&lt;div class="bottominner intelbottom" id="intelbottom"&gt;
&lt;ul class="intellistul"&gt;
&lt;li class="intellist"&gt; &lt;input type="radio" name="rb-proccessor" id="i5-9600k" value="i5 9600k"&gt;
&lt;label for="i5-9600k"&gt;i5 9600k &lt;p class="price"&gt;$244.77&lt;/p&gt; &lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;&lt;/label&gt;&lt;/li&gt;
&lt;li class="intellist"&gt;
&lt;input type="radio" name="rb-proccessor" id="i7-9700k" value="i7 9700k"&gt;&gt;
&lt;label for="i7-9700k"&gt;i7 9700k&lt;p class="price"&gt;$435.00&lt;/p&gt;&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;&lt;/label&gt;
&lt;/li&gt;
&lt;li class="intellist"&gt;
&lt;input type="radio" name="rb-proccessor" id="i3-12100" value="i3 12100"&gt;&gt;
&lt;label for="i3-12100"&gt;i3 12100&lt;p class="price"&gt;$129.98&lt;/p&gt;&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;&lt;/label&gt;
&lt;/li&gt;
&lt;li class="intellist"&gt; &lt;input type="radio" name="rb-proccessor" id="i5-12600k" value="i5 12600k"&gt; &lt;label for="i5-12600k"&gt;i5 12600k&lt;p class="price"&gt;$277.99&lt;/p&gt;&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;&lt;/label&gt; &lt;/li&gt;
&lt;li class="intellist"&gt; &lt;input type="radio" name="rb-proccessor" id="i7-12700k" value="i7 12700k"&gt; &lt;label for="i7-12700k"&gt;i7 12700k&lt;p class="price"&gt;$399.99&lt;/p&gt;&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;&lt;/label&gt; &lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="bottominner amdbottom" id="amdbottom"&gt;
&lt;ul class="amdlistul"&gt;
&lt;li class="amdlist"&gt; &lt;input type="radio" name="rb-proccessor" id="Ryzen 5 3600" value="Ryzen 5 3600"&gt; &lt;label for="Ryzen 5 3600"&gt;Ryzen 5 3600&lt;p class="price"&gt;$147.89&lt;/p&gt;&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;&lt;/label&gt;&lt;/li&gt;
&lt;li class="amdlist"&gt; &lt;input type="radio" name="rb-proccessor" id="Ryzen 7 3700x" value="Ryzen 7 3700x"&gt; &lt;label for="Ryzen 7 3700x"&gt;Ryzen 7 3700x&lt;p class="price"&gt;$265.00&lt;/p&gt;&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;&lt;/label&gt;&lt;/li&gt;
&lt;li class="amdlist"&gt; &lt;input type="radio" name="rb-proccessor" id="Ryzen 9 3900x" value="Ryzen 9 3900x"&gt; &lt;label for="Ryzen 9 3900x"&gt;Ryzen 9 3900x&lt;p class="price"&gt;$360.00&lt;/p&gt;&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;&lt;/label&gt;&lt;/li&gt;
&lt;li class="amdlist"&gt; &lt;input type="radio" name="rb-proccessor" id="Ryzen 7 5800x" value="Ryzen 7 5800x"&gt; &lt;label for="Ryzen 7 5800x"&gt;Ryzen 7 5800x&lt;p class="price"&gt;$257.00&lt;/p&gt;&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;&lt;/label&gt;&lt;/li&gt;
&lt;li class="amdlist"&gt; &lt;input type="radio" name="rb-proccessor" id="Ryzen 9 5950x" value="Ryzen 9 5950x"&gt; &lt;label for="Ryzen 9 5950x"&gt;Ryzen 9 5950x&lt;p class="price"&gt;$546.73&lt;/p&gt;&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;&lt;/label&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;


I know my HTML isn't too great, but I have this paragraph that has text that says reccommended, and text that says the price of the item in each row. Now there is a JS Variable I have in a js file called CPUp2 which is a calculated price. Now I'd like to make the reccommended text only show on 2 items of each list. One on the item that is the closest in price that is above the CPUp2 varaible (lets say its equal to 150), It would only show the reccommended paragraph on the two ones that are closest in price above and below it. (for example on the AMD list, it would have the one thats 147 and 257 be reccommended. I also need a way of when I add new processors to the list, it would also add those as potential reccommendations. I thought of showing and hiding it with document.getelementbyid, but I'm not sure how to compare the prices.
Copy linkTweet thisAlerts:
@SempervivumSep 25.2022 — I coded this javascript which should do the job:
``<i>
</i> // Add an event listener to the window object
// that fires every time a status is changed:
window.addEventListener('change', event =&gt; {
// 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) =&gt; {
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 &lt; limit) {
// Is the price above the closest price below?
if (price &gt; closestBelowPrice) {
// Note elements and price for "below":
closestBelowPrice = price;
closestBelowEle = priceEle;
closestReccommendedEleBelow = reccommendedEle;
}
} else {
if (price &lt; 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> &lt;li class="intellist processor-list"&gt; &lt;input type="radio" name="rb-proccessor" id="i5-9600k"<i>
</i>
``

Do so for each list item.
Copy linkTweet thisAlerts:
@ProductionNerdauthorSep 25.2022 — @Sempervivum#1647425 so I have the variable CPUp2 which has a recommended price already calculated. So how would I have the recommendation process be off of that?
Copy linkTweet thisAlerts:
@SempervivumSep 25.2022 — @ProductionNerd#1647441

Unfortunately I don't understand this: Is it a new requirement or an issue with the previous code? You wrote:
>I have the variable CPUp2 which has a recommended price already calculated.

In the latest requirement **two** CPUs were recommended.
Copy linkTweet thisAlerts:
@ProductionNerdauthorSep 25.2022 — @Sempervivum#1647446 No I have a JS Variable that's defined as: "CPUp2" and that has the recommended price amount of the processor. I'm not sure what the current recommendation is based off of, but is it possible to base what is shown and what is hidden based off of that variable? There is also errors with the code. It doesn't change the visibility of any of the recommended tags
Copy linkTweet thisAlerts:
@SempervivumSep 26.2022 — I suspect that the variable I named `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>&lt;!doctype html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;Test&lt;/title&gt;
&lt;style&gt;
/* 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;
}
&lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;
&lt;div class="bottominner intelbottom" id="intelbottom"&gt;
&lt;ul class="intellistul"&gt;
&lt;li class="intellist processor-list"&gt; &lt;input type="radio" name="rb-proccessor" id="i5-9600k"
value="i5 9600k"&gt;
&lt;label for="i5-9600k"&gt;i5 9600k &lt;p class="price"&gt;$244.77&lt;/p&gt;
&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;
&lt;/label&gt;
&lt;/li&gt;
&lt;li class="intellist processor-list"&gt;
&lt;input type="radio" name="rb-proccessor" id="i7-9700k" value="i7 9700k"&gt;&gt;
&lt;label for="i7-9700k"&gt;i7 9700k&lt;p class="price"&gt;$435.00&lt;/p&gt;
&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;
&lt;/label&gt;
&lt;/li&gt;
&lt;li class="intellist processor-list"&gt;
&lt;input type="radio" name="rb-proccessor" id="i3-12100" value="i3 12100"&gt;&gt;
&lt;label for="i3-12100"&gt;i3 12100&lt;p class="price"&gt;$129.98&lt;/p&gt;
&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;
&lt;/label&gt;
&lt;/li&gt;
&lt;li class="intellist processor-list"&gt; &lt;input type="radio" name="rb-proccessor" id="i5-12600k"
value="i5 12600k"&gt; &lt;label for="i5-12600k"&gt;i5 12600k&lt;p class="price"&gt;$277.99&lt;/p&gt;
&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;
&lt;/label&gt; &lt;/li&gt;
&lt;li class="intellist processor-list"&gt; &lt;input type="radio" name="rb-proccessor" id="i7-12700k"
value="i7 12700k"&gt; &lt;label for="i7-12700k"&gt;i7 12700k&lt;p class="price"&gt;$399.99&lt;/p&gt;
&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;
&lt;/label&gt; &lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="bottominner amdbottom" id="amdbottom"&gt;
&lt;ul class="amdlistul"&gt;
&lt;li class="intellist processor-list"&gt; &lt;input type="radio" name="rb-proccessor" id="Ryzen 5 3600"
value="Ryzen 5 3600"&gt; &lt;label for="Ryzen 5 3600"&gt;Ryzen 5 3600&lt;p class="price"&gt;$147.89&lt;/p&gt;
&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;
&lt;/label&gt;&lt;/li&gt;
&lt;li class="intellist processor-list"&gt; &lt;input type="radio" name="rb-proccessor" id="Ryzen 7 3700x"
value="Ryzen 7 3700x"&gt;
&lt;label for="Ryzen 7 3700x"&gt;Ryzen 7 3700x&lt;p class="price"&gt;$265.00&lt;/p&gt;
&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;
&lt;/label&gt;
&lt;/li&gt;
&lt;li class="intellist processor-list"&gt; &lt;input type="radio" name="rb-proccessor" id="Ryzen 9 3900x"
value="Ryzen 9 3900x"&gt;
&lt;label for="Ryzen 9 3900x"&gt;Ryzen 9 3900x&lt;p class="price"&gt;$360.00&lt;/p&gt;
&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;
&lt;/label&gt;
&lt;/li&gt;
&lt;li class="intellist processor-list"&gt; &lt;input type="radio" name="rb-proccessor" id="Ryzen 7 5800x"
value="Ryzen 7 5800x"&gt;
&lt;label for="Ryzen 7 5800x"&gt;Ryzen 7 5800x&lt;p class="price"&gt;$257.00&lt;/p&gt;
&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;
&lt;/label&gt;
&lt;/li&gt;
&lt;li class="intellist processor-list"&gt; &lt;input type="radio" name="rb-proccessor" id="Ryzen 9 5950x"
value="Ryzen 9 5950x"&gt;
&lt;label for="Ryzen 9 5950x"&gt;Ryzen 9 5950x&lt;p class="price"&gt;$546.73&lt;/p&gt;
&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;
&lt;/label&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;_script&gt;
// Add an event listener to the window object
// that fires every time a status is changed:
window.addEventListener('change', event =&gt; {
// 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) =&gt; {
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 &lt; limit) {
// Is the price above the closest price below?
if (price &gt; closestBelowPrice) {
// Note elements and price for "below":
closestBelowPrice = price;
closestBelowEle = priceEle;
closestReccommendedEleBelow = reccommendedEle;
}
} else {
if (price &lt; 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();
&lt;__/script&gt;
&lt;/body&gt;

&lt;/html&gt;<i>
</i>
``

Note that I had to modify the script tags, please omit the underlines.
Copy linkTweet thisAlerts:
@ProductionNerdauthorSep 28.2022 — @Sempervivum#1647449 Not sure why it's not working for me. Here is my code:
window.addEventListener('change', event =&gt; {
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) =&gt; {
<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 &lt; limit) {
<i> </i> // Is the price above the closest price below?
<i> </i> if (price &gt; 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 &lt; 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();

HTML:
&lt;div class="bottominner intelbottom" id="intelbottom"&gt;
&lt;ul class="intellistul"&gt;
&lt;li class="intellist processorlist"&gt; &lt;input type="radio" name="rb-proccessor" id="i5-9600k" value="i5 9600k"&gt;
&lt;label for="i5-9600k"&gt;i5 9600k &lt;p class="price"&gt;$244.77&lt;/p&gt; &lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;&lt;/label&gt;&lt;/li&gt;
&lt;li class="intellist processorlist"&gt;
&lt;input type="radio" name="rb-proccessor" id="i7-9700k" value="i7 9700k"&gt;&gt;
&lt;label for="i7-9700k"&gt;i7 9700k&lt;p class="price"&gt;$435.00&lt;/p&gt;&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;&lt;/label&gt;
&lt;/li&gt;
&lt;li class="intellist processorlist"&gt;
&lt;input type="radio" name="rb-proccessor" id="i3-12100" value="i3 12100"&gt;&gt;
&lt;label for="i3-12100"&gt;i3 12100&lt;p class="price"&gt;$129.98&lt;/p&gt;&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;&lt;/label&gt;
&lt;/li&gt;
&lt;li class="intellist processorlist"&gt; &lt;input type="radio" name="rb-proccessor" id="i5-12600k" value="i5 12600k"&gt; &lt;label for="i5-12600k"&gt;i5 12600k&lt;p class="price"&gt;$277.99&lt;/p&gt;&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;&lt;/label&gt; &lt;/li&gt;
&lt;li class="intellist processorlist"&gt; &lt;input type="radio" name="rb-proccessor" id="i7-12700k" value="i7 12700k"&gt; &lt;label for="i7-12700k"&gt;i7 12700k&lt;p class="price"&gt;$399.99&lt;/p&gt;&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;&lt;/label&gt; &lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="bottominner amdbottom" id="amdbottom"&gt;
&lt;ul class="amdlistul"&gt;
&lt;li class="amdlist processorlist"&gt; &lt;input type="radio" name="rb-proccessor" id="Ryzen 5 3600" value="Ryzen 5 3600"&gt; &lt;label for="Ryzen 5 3600"&gt;Ryzen 5 3600&lt;p class="price"&gt;$147.89&lt;/p&gt;&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;&lt;/label&gt;&lt;/li&gt;
&lt;li class="amdlist processorlist"&gt; &lt;input type="radio" name="rb-proccessor" id="Ryzen 7 3700x" value="Ryzen 7 3700x"&gt; &lt;label for="Ryzen 7 3700x"&gt;Ryzen 7 3700x&lt;p class="price"&gt;$265.00&lt;/p&gt;&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;&lt;/label&gt;&lt;/li&gt;
&lt;li class="amdlist processorlist"&gt; &lt;input type="radio" name="rb-proccessor" id="Ryzen 9 3900x" value="Ryzen 9 3900x"&gt; &lt;label for="Ryzen 9 3900x"&gt;Ryzen 9 3900x&lt;p class="price"&gt;$360.00&lt;/p&gt;&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;&lt;/label&gt;&lt;/li&gt;
&lt;li class="amdlist processorlist"&gt; &lt;input type="radio" name="rb-proccessor" id="Ryzen 7 5800x" value="Ryzen 7 5800x"&gt; &lt;label for="Ryzen 7 5800x"&gt;Ryzen 7 5800x&lt;p class="price"&gt;$257.00&lt;/p&gt;&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;&lt;/label&gt;&lt;/li&gt;
&lt;li class="amdlist processorlist"&gt; &lt;input type="radio" name="rb-proccessor" id="Ryzen 9 5950x" value="Ryzen 9 5950x"&gt; &lt;label for="Ryzen 9 5950x"&gt;Ryzen 9 5950x&lt;p class="price"&gt;$546.73&lt;/p&gt;&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;&lt;/label&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
Copy linkTweet thisAlerts:
@SempervivumSep 28.2022 — You spelling of processorlist doesn't match:

`document.querySelectorAll('.processor-list label').forEach((item, idx) =&gt; {</C>

<C>
&lt;li class="amdlist processorlist"&gt;`
Copy linkTweet thisAlerts:
@ProductionNerdauthorSep 28.2022 — @Sempervivum#1647543 I can’t believe I failed to consider that or review my code. It’s honestly been a pretty busy few days, I’ll try that. Thank you so much and I’m sorry I didn’t consider that
Copy linkTweet thisAlerts:
@ProductionNerdauthorSep 29.2022 — @ProductionNerd#1647556 So I Implemented that, and it mostly works, except it doesn't recommend on the AMD list, and it only recommends one on the intel: ![](https://https://ibb.co/sWxdDTS) I probably should of mentioned that it should have 2 recommended options for both lists separate. I do I have to duplicate the code and change the values?
Copy linkTweet thisAlerts:
@SempervivumSep 29.2022 — I see: The code should recommend **four** items, two for AMD and two for Intel? The code I posted doesn't do so yet, it would have to be extended. However I do not recommend duplicating it but creating a function instead with a suitable parameter:
``<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) =&gt; {
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 &lt; limit) {
// Is the price above the closest price below?
if (price &gt; closestBelowPrice) {
// Note elements and price for "below":
closestBelowPrice = price;
closestBelowEle = priceEle;
closestReccommendedEleBelow = reccommendedEle;
}
} else {
if (price &lt; 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> &lt;div class="bottominner intelbottom" id="intelbottom"&gt;
&lt;ul class="intellistul"&gt;
&lt;li class="intellist processor-list"&gt; &lt;input type="radio" name="rb-proccessor" id="i5-9600k"
value="i5 9600k"&gt;
&lt;label for="i5-9600k"&gt;i5 9600k &lt;p class="price"&gt;$244.77&lt;/p&gt;
&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;
&lt;/label&gt;
&lt;/li&gt;
&lt;li class="intellist processor-list"&gt;
&lt;input type="radio" name="rb-proccessor" id="i7-9700k" value="i7 9700k"&gt;&gt;
&lt;label for="i7-9700k"&gt;i7 9700k&lt;p class="price"&gt;$435.00&lt;/p&gt;
&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;
&lt;/label&gt;
&lt;/li&gt;
&lt;li class="intellist processor-list"&gt;
&lt;input type="radio" name="rb-proccessor" id="i3-12100" value="i3 12100"&gt;&gt;
&lt;label for="i3-12100"&gt;i3 12100&lt;p class="price"&gt;$129.98&lt;/p&gt;
&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;
&lt;/label&gt;
&lt;/li&gt;
&lt;li class="intellist processor-list"&gt; &lt;input type="radio" name="rb-proccessor" id="i5-12600k"
value="i5 12600k"&gt; &lt;label for="i5-12600k"&gt;i5 12600k&lt;p class="price"&gt;$277.99&lt;/p&gt;
&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;
&lt;/label&gt; &lt;/li&gt;
&lt;li class="intellist processor-list"&gt; &lt;input type="radio" name="rb-proccessor" id="i7-12700k"
value="i7 12700k"&gt; &lt;label for="i7-12700k"&gt;i7 12700k&lt;p class="price"&gt;$399.99&lt;/p&gt;
&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;
&lt;/label&gt; &lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="bottominner amdbottom" id="amdbottom"&gt;
&lt;ul class="amdlistul"&gt;
&lt;li class="amdlist processor-list"&gt; &lt;input type="radio" name="rb-proccessor" id="Ryzen 5 3600"
value="Ryzen 5 3600"&gt; &lt;label for="Ryzen 5 3600"&gt;Ryzen 5 3600&lt;p class="price"&gt;$147.89&lt;/p&gt;
&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;
&lt;/label&gt;&lt;/li&gt;
&lt;li class="amdlist processor-list"&gt; &lt;input type="radio" name="rb-proccessor" id="Ryzen 7 3700x"
value="Ryzen 7 3700x"&gt;
&lt;label for="Ryzen 7 3700x"&gt;Ryzen 7 3700x&lt;p class="price"&gt;$265.00&lt;/p&gt;
&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;
&lt;/label&gt;
&lt;/li&gt;
&lt;li class="amdlist processor-list"&gt; &lt;input type="radio" name="rb-proccessor" id="Ryzen 9 3900x"
value="Ryzen 9 3900x"&gt;
&lt;label for="Ryzen 9 3900x"&gt;Ryzen 9 3900x&lt;p class="price"&gt;$360.00&lt;/p&gt;
&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;
&lt;/label&gt;
&lt;/li&gt;
&lt;li class="amdlist processor-list"&gt; &lt;input type="radio" name="rb-proccessor" id="Ryzen 7 5800x"
value="Ryzen 7 5800x"&gt;
&lt;label for="Ryzen 7 5800x"&gt;Ryzen 7 5800x&lt;p class="price"&gt;$257.00&lt;/p&gt;
&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;
&lt;/label&gt;
&lt;/li&gt;
&lt;li class="amdlist processor-list"&gt; &lt;input type="radio" name="rb-proccessor" id="Ryzen 9 5950x"
value="Ryzen 9 5950x"&gt;
&lt;label for="Ryzen 9 5950x"&gt;Ryzen 9 5950x&lt;p class="price"&gt;$546.73&lt;/p&gt;
&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;
&lt;/label&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;<i>
</i>
``
Copy linkTweet thisAlerts:
@ElectricalConsultantsSep 29.2022 — Connect with verified [url=https://www.solutionbuggy.com/sb/electrical-consultants.html] Electrical Consultants[/url]

to grow your electrical manufacturing unit. Get India’s top electrical industry consultants.

Our electrical consultants can help industries design a new or alter the existing infrastructure and systems to facilitate the production process. Apart from this, expert electrical engineering consultants from SolutionBuggy, the largest electrical consulting company dedicated to MSMEs, can also help in optimizing the consumption of power through energy efficient infrastructure. Energy efficient infrastructure can help minimize operating costs and increase the production. As plenty of electrical industries have been tackling the thorniest engineering problems, search for freelance electrical engineering consultants have never stopped. Hence SolutionBuggy is helping electrical industries by providing more than 1,200 electrical consultants.
Copy linkTweet thisAlerts:
@ProductionNerdauthorSep 29.2022 — @Sempervivum#1647559 That makes so much sense now. Thank you so much. Do you think it's possible to move those elements that have the recommended shown to the top? I thought about using the style.order = '1' in js, but I'm not sure how to get the element in the js.
Copy linkTweet thisAlerts:
@SempervivumSep 30.2022 — Yes, of course this is possible:
``<i>
</i> // Add an event listener to the window object
// that fires every time a status is changed:
window.addEventListener('change', event =&gt; {
// 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) =&gt; {
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 &lt; limit) {
// Is the price above the closest price below?
if (price &gt; closestBelowPrice) {
// Note elements and price for "below":
closestBelowPrice = price;
closestBelowEle = currentLi;
}
} else {
if (price &lt; 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>
``

I did some refactoring in order to make the code more clear.
Copy linkTweet thisAlerts:
@ProductionNerdauthorSep 30.2022 — @Sempervivum#1647587 It worked, thank you so much, My apologies for wasting your time. I definitely would not be able to do this on my own.
Copy linkTweet thisAlerts:
@SempervivumSep 30.2022 — You're welcome. No reason to apologize, answering questions is the purpose of this forum.
Copy linkTweet thisAlerts:
@ProductionNerdauthorOct 01.2022 — @Sempervivum#1647598 The one final thing (I hope) is the recommend is fixed when you can scroll in the box, it doesn't scroll with the other elements. You can see here: https://productionnerd.github.io/PC-Helper-Web/

It will ask you questions, you could just put in some random info until you get to the 3rd page, which is where the product container is. I realized that is because the position is set to absolute in the CSS. Is there a way for me to set it so it doesn't impact the other elements in the li, and still have it scroll?
Copy linkTweet thisAlerts:
@SempervivumOct 01.2022 — >the recommend is fixed when you can scroll in the box, it doesn't scroll with the other elements.

For me it does not: All items stay in the same line when scrolling. Did you fix this issue in the meantime?
Copy linkTweet thisAlerts:
@ProductionNerdauthorOct 01.2022 — @Sempervivum#1647615 I actually did fix it. All it took was 4 hours, and I came up with a solution.
Copy linkTweet thisAlerts:
@ProductionNerdauthorOct 03.2022 — @Sempervivum#1647615 Ok here is hopefully the last thing. I implemented a new page in the website with a new list, and I click on the buttons, they don't change their value. Here is the HTML: &lt;div class="productContainer"&gt;
&lt;div class="bottominner motherbottom" id="motherbottom"&gt;
&lt;ul class="listul"&gt;
&lt;li class="asuslist mother-list list"&gt; &lt;input type="radio" name="rb-mother" id="Ryzen 5 3600" value="Ryzen 5 3600"&gt; &lt;label for="Ryzen 5 3600"&gt;Ryzen 5 3600&lt;p class="price"&gt;$147.89&lt;/p&gt;&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;&lt;/label&gt;&lt;/li&gt;
&lt;li class="asuslist mother-list list"&gt; &lt;input type="radio" name="rb-mother" id="Ryzen 5 3600" value="Ryzen 5 3600"&gt; &lt;label for="Ryzen 5 3600"&gt;Ryzen 5 3600&lt;p class="price"&gt;$147.89&lt;/p&gt;&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;&lt;/label&gt;&lt;/li&gt;
&lt;li class="asuslist mother-list list"&gt; &lt;input type="radio" name="rb-mother" id="Ryzen 5 3600" value="Ryzen 5 3600"&gt; &lt;label for="Ryzen 5 3600"&gt;Ryzen 5 3600&lt;p class="price"&gt;$147.89&lt;/p&gt;&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;&lt;/label&gt;&lt;/li&gt;
&lt;li class="asuslist mother-list list"&gt; &lt;input type="radio" name="rb-mother" id="Ryzen 5 3600" value="Ryzen 5 3600"&gt; &lt;label for="Ryzen 5 3600"&gt;Ryzen 5 3600&lt;p class="price"&gt;$147.89&lt;/p&gt;&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;&lt;/label&gt;&lt;/li&gt;
&lt;li class="asuslist mother-list list"&gt; &lt;input type="radio" name="rb-mother" id="Ryzen 5 3600" value="Ryzen 5 3600"&gt; &lt;label for="Ryzen 5 3600"&gt;Ryzen 5 3600&lt;p class="price"&gt;$147.89&lt;/p&gt;&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;&lt;/label&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;

by the way, I didn't change the values which might be the reason.
Copy linkTweet thisAlerts:
@SempervivumOct 03.2022 — In the new HTML the classes have changed, therefore you have to adjust the script:
``<i>
</i> // Add an event listener to the window object
// that fires every time a status is changed:
window.addEventListener('change', event =&gt; {
// 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 =&gt; {
// 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>
``

(code not tested this time)
Copy linkTweet thisAlerts:
@checkoutfirstOct 03.2022 — The one final thing (I hope) is the recommend is fixed when you can scroll in the box, it doesn't scroll with the other elements. You can see here: https://productionnerd.github.io/PC-Helper-Web/

It will ask you questions, you could just put in some random info until you get to the 3rd page, which is where the product container is. I realized that is because the position is set to absolute in the CSS. Is there a way for me to set it so it doesn't impact the other elements in the li, and still have it scroll?

<a href="https://www.checkoutfirst.com">warm socks!</a>
Copy linkTweet thisAlerts:
@ProductionNerdauthorOct 03.2022 — @Sempervivum#1647628 That would help with me not having to duplicate, but the issue was that the button wouldn't change to selected when you click it, not with the output. I thought I uploaded the code to github, but I didn't, and will have to do it when I get home.
Copy linkTweet thisAlerts:
@SempervivumOct 03.2022 — Ups, I dealed with the wrong subject. Changing "select" to "selected" is done by CSS. As a first step you need to replace the class names:
``<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>
``

Additionally you will have to update the IDs in the HTML. I recommend not to use blanks in IDs, just underlines and dashes.
Copy linkTweet thisAlerts:
@ProductionNerdauthorOct 04.2022 — @Sempervivum#1647639 Well I used the list class for all lists, because I would make more of them, but I uploaded the code to repository and website, if you'd like to see it not working (4th page)
Copy linkTweet thisAlerts:
@SempervivumOct 04.2022 — @ProductionNerd#1647641

All IDs and for-attributes are the same, you have to make the unique.
Copy linkTweet thisAlerts:
@ProductionNerdauthorOct 04.2022 — @Sempervivum#1647643 I made the ids unique I think
Copy linkTweet thisAlerts:
@SempervivumOct 04.2022 — I referred to your code on github. The HTML reads:
``<i>
</i> &lt;div class="productContainer"&gt;
&lt;div class="bottominner motherbottom" id="motherbottom"&gt;
&lt;ul class="listul"&gt;
&lt;li class="asuslist mother-list list"&gt; &lt;input type="radio" name="rb-mother" id="Ryzen 5 3600" value="Ryzen 5 3600"&gt; &lt;label for="Ryzen 5 3600"&gt;Ryzen 5 3600&lt;p class="price"&gt;$147.89&lt;/p&gt;
&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;
&lt;/label&gt;&lt;/li&gt;
&lt;li class="asuslist mother-list list"&gt; &lt;input type="radio" name="rb-mother" id="Ryzen 5 3600" value="Ryzen 5 3600"&gt; &lt;label for="Ryzen 5 3600"&gt;Ryzen 5 3600&lt;p class="price"&gt;$147.89&lt;/p&gt;
&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;
&lt;/label&gt;&lt;/li&gt;
&lt;li class="asuslist mother-list list"&gt; &lt;input type="radio" name="rb-mother" id="Ryzen 5 3600" value="Ryzen 5 3600"&gt; &lt;label for="Ryzen 5 3600"&gt;Ryzen 5 3600&lt;p class="price"&gt;$147.89&lt;/p&gt;
&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;
&lt;/label&gt;&lt;/li&gt;
&lt;li class="asuslist mother-list list"&gt; &lt;input type="radio" name="rb-mother" id="Ryzen 5 3600" value="Ryzen 5 3600"&gt; &lt;label for="Ryzen 5 3600"&gt;Ryzen 5 3600&lt;p class="price"&gt;$147.89&lt;/p&gt;
&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;
&lt;/label&gt;&lt;/li&gt;
&lt;li class="asuslist mother-list list"&gt; &lt;input type="radio" name="rb-mother" id="Ryzen 5 3600" value="Ryzen 5 3600"&gt; &lt;label for="Ryzen 5 3600"&gt;Ryzen 5 3600&lt;p class="price"&gt;$147.89&lt;/p&gt;
&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;
&lt;/label&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;<i>
</i>
`</CODE>
All of the items are having the same ID and for-attribute. Change it like so:
<CODE>
`<i>
</i> &lt;div class="productContainer"&gt;
&lt;div class="bottominner motherbottom" id="motherbottom"&gt;
&lt;ul class="listul"&gt;
&lt;li class="asuslist mother-list list"&gt; &lt;input type="radio" name="rb-mother" id="asus-1" value="Ryzen 5 3600"&gt; &lt;label for="asus-1"&gt;Ryzen 5 3600&lt;p class="price"&gt;$147.89&lt;/p&gt;
&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;
&lt;/label&gt;&lt;/li&gt;
&lt;li class="asuslist mother-list list"&gt; &lt;input type="radio" name="rb-mother" id="asus-2" value="Ryzen 5 3600"&gt; &lt;label for="asus-2"&gt;Ryzen 5 3600&lt;p class="price"&gt;$147.89&lt;/p&gt;
&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;
&lt;/label&gt;&lt;/li&gt;
&lt;li class="asuslist mother-list list"&gt; &lt;input type="radio" name="rb-mother" id="asus-3" value="Ryzen 5 3600"&gt; &lt;label for="asus-3"&gt;Ryzen 5 3600&lt;p class="price"&gt;$147.89&lt;/p&gt;
&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;
&lt;/label&gt;&lt;/li&gt;
&lt;li class="asuslist mother-list list"&gt; &lt;input type="radio" name="rb-mother" id="asus-4" value="Ryzen 5 3600"&gt; &lt;label for="asus-4"&gt;Ryzen 5 3600&lt;p class="price"&gt;$147.89&lt;/p&gt;
&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;
&lt;/label&gt;&lt;/li&gt;
&lt;li class="asuslist mother-list list"&gt; &lt;input type="radio" name="rb-mother" id="asus-5" value="Ryzen 5 3600"&gt; &lt;label for="asus-5"&gt;Ryzen 5 3600&lt;p class="price"&gt;$147.89&lt;/p&gt;
&lt;p class="reccommended"&gt;Reccommended&lt;/p&gt;
&lt;/label&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;<i>
</i>
``
Copy linkTweet thisAlerts:
@ProductionNerdauthorOct 05.2022 — @Sempervivum#1647667 Oh wow that worked, thank you so much. I also am getting this error in the console: app.js:72 Uncaught TypeError: Cannot read properties of null (reading 'closest')
Copy linkTweet thisAlerts:
@jackharry11Oct 05.2022 — HTML:

<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>
Copy linkTweet thisAlerts:
@ProductionNerdauthorOct 05.2022 — @jackharry11#1647669 That's what I have
Copy linkTweet thisAlerts:
@ProductionNerdauthorOct 08.2022 — @Sempervivum#1647667 Just curious if you saw my reply about the error?
Copy linkTweet thisAlerts:
@SempervivumOct 08.2022 — Currently I'm on the move, only mobile available. Gonna look into later.
Copy linkTweet thisAlerts:
@ProductionNerdauthorOct 08.2022 — @Sempervivum#1647724 that’s alright. Hope it goes well!
Copy linkTweet thisAlerts:
@SempervivumOct 10.2022 — I viewed your code on github now.

You are handing over "asuslistul" to the function markClosest:

`markClosest("asuslistul", Motherboardp2);`

However your list items do not have such class, you have to hand over "asuslist" instead.
Copy linkTweet thisAlerts:
@ProductionNerdauthorOct 10.2022 — @Sempervivum#1647759 ah I see, thanks. No idea how I missed that
×

Success!

Help @ProductionNerd spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...