Menu
Community /Pin to ProfileBookmark
@ProductionNerdSep 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?@ProductionNerdSep 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?@ProductionNerdSep 23.2022 — #@Sempervivum#1647374 you learn something new every day I guess. Thank you so much!@ProductionNerdSep 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:
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.@ProductionNerdSep 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?@ProductionNerdSep 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@ProductionNerdSep 28.2022 — #@Sempervivum#1647449 Not sure why it's not working for me. Here is my code:
HTML:
@ProductionNerdSep 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@ProductionNerdSep 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: 
 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?@ProductionNerdSep 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.@ProductionNerdSep 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.@ProductionNerdOct 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?@ProductionNerdOct 01.2022 — #@Sempervivum#1647615 I actually did fix it. All it took was 4 hours, and I came up with a solution.@ProductionNerdOct 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:
by the way, I didn't change the values which might be the reason.@ProductionNerdOct 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.@ProductionNerdOct 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)@ProductionNerdOct 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')@ProductionNerdOct 08.2022 — #@Sempervivum#1647667 Just curious if you saw my reply about the error?
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:
This form won’t store your data – Just in case you were worried about that.
ok bye
Sign in
to post a comment43 Comments(s) ↴
0
@ProductionNerdSep 22.2022 — #0
@ProductionNerdSep 23.2022 — #0
@ProductionNerdSep 23.2022 — #0
@ProductionNerdSep 25.2022 — #I have these 2 lists as you can see below:
<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 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.
0
@ProductionNerdSep 25.2022 — #0
@ProductionNerdSep 25.2022 — #0
@ProductionNerdSep 28.2022 — #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();HTML:
<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>0
@ProductionNerdSep 28.2022 — #0
@ProductionNerdSep 29.2022 — # 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?0
@ProductionNerdSep 29.2022 — #0
@ProductionNerdSep 30.2022 — #0
@ProductionNerdOct 01.2022 — #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?
0
@ProductionNerdOct 01.2022 — #0
@ProductionNerdOct 03.2022 — # <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>by the way, I didn't change the values which might be the reason.
0
@ProductionNerdOct 03.2022 — #0
@ProductionNerdOct 04.2022 — #0
@ProductionNerdOct 05.2022 — #0
@ProductionNerdOct 08.2022 — #