Niewyświetlanie wartości w JS

pytanie zadane 10 grudnia 2021 w JavaScript przez djkuba Nowicjusz (170 p.)

Witam, wstawiam tutaj fragment kodu z mojej strony:

<form id="mainForm" name="mainForm">
<input type="radio" name="kola" value="" checked/>Stalowe<br>
<input type="radio" name="kola" value="7000" />Aluminiowe<br>
</form>
<span id="result"></span>
<script type="text/javascript">
document.mainForm.onclick = function(){
var kola = document.querySelector('input[name = kola]:checked').value;
if (kola > 0){
licz.innerHTML = "+kola"; //wyswietlanie informacji w divie
	}
}
</script>

Ma on za zadanie wyświetlać cenę felg w zależności od wyboru w divie "licz". Co zrobić, żeby po wybraniu opcji felgi stalowe nie pokazywała się żadna informacja? Jeżeli zaznaczę opcję felgi aluminiowe to cena pojawi się prawidłowo, lecz po zmianie na felgi stalowe w miejscu ceny pojawia się 0, a tego nie chcę. Co zrobić? Z góry dzięki ;)

1 odpowiedź

odpowiedź 10 grudnia 2021 przez Wiciorny Ekspert (270,170 p.)
wybrane 10 grudnia 2021 przez djkuba

Najlepsza

Może najprostsze rozwiązanie to po prostu ustawić display-> none? jako rezultat przy fladze felgi stalowej ?
https://www.w3schools.com/css/css_display_visibility.asp

Albo wpisać pustego stringa, zamiast ukrywać całe pole rezultatu.

element.innerHTML = ''

$('#field').val('');

komentarz 10 grudnia 2021 przez djkuba Nowicjusz (170 p.)

Wpisałem pustego stringa i działa.

<script type="text/javascript">
document.mainForm.onclick = function(){
var kola = document.querySelector('input[name = kola]:checked').value;
if (kola > 0){
    licz.innerHTML = +kola;
}
else {
    licz.innerHTML = '';
}
}
</script>

Dzięki!

komentarz 11 grudnia 2021 przez VBService Ekspert (253,340 p.)
edycja 11 grudnia 2021 przez VBService

<form id="mainForm" name="mainForm">
<input type="radio" name="kola" value="" checked/>Stalowe<br>
<input type="radio" name="kola" value="7000" />Aluminiowe<br>
</form>
<span id="result"></span>
<script type="text/javascript">
  mainForm.onclick = function(){
    var kola = document.querySelector('input[name = kola]:checked').value;
    // result.innerHTML = ''+kola+'';
    // result.innerHTML = `${kola}`;
    // result.innerHTML = (kola > 0) ? kola : '';
    result.innerHTML = kola.toString();    
  }
</script>

komentarz 11 grudnia 2021 przez djkuba Nowicjusz (170 p.)
edycja 11 grudnia 2021 przez djkuba

Dodam kolejne pytanie tutaj, żeby nie tworzyć kolejnych tematów.
Ogólny temat mojej strony to konfigurator wyposażenia według zmiennych z inputów typu radio, checkbox i selectów.
Założenie jest takie, zmieniał się kolor auta po wybraniu go z listy rozwijanej (to akurat działa poprawnie) i żeby zaznaczone/wybrane elementy dodatkowego wyposażenia były wyświetlane pod ceną bazową wraz z ceną za poszczególny dodatek + sumowanie na koniec. Jako dodatkowe wyposażenie mają być: czujniki parkowania, climatronic, nawigacja oraz kolor auta inny niż szary. Poniżej wstawiam kod, aby było wiadomo o co chodzi

<!DOCTYPE html>
<html lang="pl-PL">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Comatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Konfigurator wyposażenia</title>
	<link rel="stylesheet" href="styl.css">
</head>
<body>
	<div id="glowny">
	<section id="baner">
	<img src="baner.jpg" alt="baner" id="banerjpg">
	</section>

	<section id="lewypanel">
	<hr></hr>
	<h2>Kolor</h2>
	<select id="selectBox" onchange="changeFunc();">
		<option value="1">szary</option>
		<option value="2">niebieski</option>
		<option value="3">czerwony</option>
		<option value="4">żółty</option>
		<option value="5">zielony</option>
	</select>
	<hr></hr>
	<h2>Felgi</h2>
	<form id="mainForm" name="mainForm">
    <input type="radio" name="kola" value='' checked/>Stalowe<br>
    <input type="radio" name="kola" value="7000" />Aluminiowe<br>
</form>
<span id="result"></span>
	<script type="text/javascript">
	document.mainForm.onclick = function(){
    var kola = document.querySelector('input[name = kola]:checked').value;
    var klima = document.querySelector('input[name = klima]:checked');
    var selectBox = document.getElementById("selectBox");
	var selectedValue = selectBox.options[selectBox.selectedIndex].value;
    if (kola > 0){
    licz.innerHTML = "Felgi aluminiowe "  +kola;
	}
	else {
    licz.innerHTML = '';
	}
}
		</script>
	<hr></hr>
	<h2>Doposażenie</h2>
	<input id="czujniki" type="checkbox" value="6500" onclick="()"> Czujniki parkowania<br>
	<input id="klima" type="checkbox" value="8500" onclick="function()"> Climatronic<br>
	<input id="navi" type="checkbox" value="5000" onclick="function()"> Nawigacja
	</form>
	<hr></hr>
	</section>
	<section id="prawypanel">
		<h1>Twój samochód</h1>
		<div id="obrazek">
		<img src="szary.png" alt="foto" class="image Samochod">
		</div>
		<h1>Wycena</h1>
		<div id="cena">
		<p id="cena">Cena bazowa 75000zł</p>
		</div>
		<div id="licz">
			
		</div>
	</section>

	<section id="footer">
		<p>Strone wykonał:</p>
	</section>
</div>
</body>
<script type="text/javascript">
	function changeFunc(){
	var selectBox = document.getElementById("selectBox");
	var selectedValue = selectBox.options[selectBox.selectedIndex].value;
 		
 		if (selectedValue == "1"){
    	document.getElementById("obrazek").innerHTML = "<img src='szary.png'>";
    	}
    	else if (selectedValue == "2")
    		{
    	document.getElementById("obrazek").innerHTML = "<img src='niebieski.png'>";
    	}
    	else if (selectedValue == "3")
    		{
    	document.getElementById("obrazek").innerHTML = "<img src='czerwony.png'>";
    	}
    	else if (selectedValue == "4")
    		{
    	document.getElementById("obrazek").innerHTML = "<img src='zolty.png'>";
    	}
    	else if (selectedValue == "5")
    		{
    	document.getElementById("obrazek").innerHTML = "<img src='zielony.png'>";
    	}
    	else {
    	document.getElementById("obrazek").innerHTML = "<img src='szary.png'>";
  		}
	}
		</script>
</html>

W jaki sposób pisać skrypt, aby można było zawrzeć w nim kilka ifów? I jeszcze jedno - jak zrobić, żeby elementy wyposażenia wyświetlały się jeden po drugim? Coś udało mi się zaradzić, ale gdy mam zaznaczone felgi aluminiowe i kliknę np. nawigację to zastępuje ona felgi zamiast wyświetlić się pod spodem.
Może pytania te są banalne, lecz są to moje pierwsze kroki w JS