Javascript - getelementbyid - pomoc

0

Cześć, nie jestem do końca ogarnięty w js i potrzebuję drobnej pomocy. Chodzi mi o to, żeby po w wyboru danego trójkąta z "radio" po wciśnięciu buttona pole obliczało pole wybranego trójkąta. Zrobiłem coś takiego, ale niestety nie działa. Mógłby ktoś poprawić mi zaistniałe błędy?

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<meta charset="utf-8"/>
</head>
<script>
function poleF(xd)
{
	if(document.getElementById('rownoboczny')
	{
	alert("Element does not exist. Let's create it.");
//	 var a=xd.a.value;
//	 var h=xd.h.value;
//	 var pole = a*100*h/2;
//	 document.write(pole);
	}else
	{
	alert("xd");
	}
//	var a=xd.a.value;
//	var h=xd.h.value;
//   var pole = a*h/2;
//    document.write(pole);
}

function obwodF(xd)
{
    var a=Number(xd.a.value);
	var b=Number(xd.b.value);
	var c=Number(xd.c.value);
    var obwod = a+b+c;
	document.write(obwod);
}

</script>
<body>
<FORM name="xd">
Bok a: <input type="text" value="" name="a"/><br>
Bok b: <input type="text" value="" name="b"/><br> 
Bok c: <input type="text" value="" name="c"/><br>
Wys h: <input type="text" value="" name="h"/><br>
<input type="radio" name="trojkat" id="rownoboczny" value="rownoboczny"> Równoboczny
<input type="radio" name="trojkat" value="prostokatny"> Prostokątny
<input type="radio" name="trojkat" value="rownoramienny"> Równoramienny
<input type="radio" name="trojkat" value="dowolny"> Dowolny
<br>
<input type="button" value="POLE" onClick="poleF(this.form)"/>
<input type="button" value="OBWOD" onClick="obwodF(this.form)"/>
</FORM>
<hr>
</body>
</html>
0

if(document.getElementById('rownoboczny')

Tutaj masz syntax error. Brakuje Ci nawiasu.

Poza tym wrzucaj swój kod na JSFiddle lub JS Bin to prędzej Ci ktoś pomoże, bo tak to często musimy sami tracić czas na odtworzenie problemu, a to sporą część z nas zniechęca ;) Programiści są leniwi...

0

Zrobiłem Ci rozpoznawanie wybranego Radio. Może z obliczeniami już sobie poradzisz.

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<meta charset="utf-8"/>
</head>
<script>
function poleF()
{
    var radios = document.getElementsByName('trojkat');

    if(radios[0].checked)
    {
        alert('tutaj obliczam rownoboczny');
    }
    if(radios[1].checked)
    {
        alert('tutaj obliczam prostokatny');
    }
    if(radios[2].checked)
    {
        alert('tutaj obliczam rownoramienny');
    }
    if(radios[3].checked)
    {
        alert('tutaj obliczam dowolny');
    }
}

function obwodF()
{
    var radios = document.getElementsByName('trojkat');

    if(radios[0].checked)
    {
        alert('tutaj obliczam rownoboczny');
    }
    if(radios[1].checked)
    {
        alert('tutaj obliczam prostokatny');
    }
    if(radios[2].checked)
    {
        alert('tutaj obliczam rownoramienny');
    }
    if(radios[3].checked)
    {
        alert('tutaj obliczam dowolny');
    }
}

</script>
<body>
Bok a: <input type="text" value="" name="a" id="a" /><br>
Bok b: <input type="text" value="" name="b" id="b" /><br> 
Bok c: <input type="text" value="" name="c" id="c" /><br>
Wys h: <input type="text" value="" name="h" id="h" /><br>
<input type="radio" name="trojkat" value="rownoboczny"> Rownoboczny
<input type="radio" name="trojkat" value="prostokatny"> Prostokatny
<input type="radio" name="trojkat" value="rownoramienny"> Rownoramienny
<input type="radio" name="trojkat" value="dowolny"> Dowolny
<br>
<input type="button" value="POLE" onClick="poleF()"/>
<input type="button" value="OBWOD" onClick="obwodF()"/>
<hr>
</body>
</html>
0

Desu, co racja to racja - zastosuję się do rady.
Wielki Ogrodnik, dzięki uratowałeś mi ocenę!

1

Rozwiązanie @Wielki Ogrodnik jest delikatnie mówiąc średnie, tu lepszy przykład (choć też pisany "na kolanie"):

<div id="options">
  <input type="radio" name="example" value="1" />
  <input type="radio" name="example" value="2" />
  <input type="radio" name="example" value="3" />
  <input type="radio" name="example" value="4" />
  <input type="radio" name="example" value="5" />
</div>

<button id="calculate">Oblicz</button>

let userChoice = null;

document
  .getElementById('options')
  .addEventListener('change', ({ target }) => {
    userChoice = target.value
  })

document
  .getElementById('calculate')
  .addEventListener('click', calculate)

function calculate () {
  if (!userChoice) {
    console.log('Nie wybrano żadnej opcji!')
    return;
  }
  
  // tu obliczenia dla poszczególnych opcji,
  // ja dam console loga bo nie o to pytasz

  console.log(`Obliczono opcję ${userChoice}`)
}

CodePen: https://codepen.io/anon/pen/KWbyMX?editors=1011

1 użytkowników online, w tym zalogowanych: 0, gości: 1