• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Usuwanie elementów ze strony

Object Storage Arubacloud
+2 głosów
342 wizyt
pytanie zadane 10 marca 2021 w JavaScript przez Kalindoreks Użytkownik (620 p.)

Witam mam prośbę. Mógłby mi ktoś pomóc aby po wypisaniu średniej można było usunąć którąś z wpisanych ocen. Pozdrawiam serdecznie

<h1>Twoje wagi</h1>
<b>Waga 1</b><input type="number" id="1" placeholder="Wpisz tu pojedyńczą ocenę">
<input type="button" value="dodaj"  onClick="dodaj1()"><br>
<p id="wynik1"></p>

<b>Waga 2</b><input type="number" id="2">
<input type="button" value="dodaj" onClick="dodaj2()"><br>
<p id="wynik2"></p>

<b>Waga 3</b><input type="number" id="3" placeholder="Wpisz tu pojedyńczą ocenę">
<input type="button" value="dodaj" onClick="dodaj3()"><br>
<p id="wynik3"></p>

<b>Waga 4</b><input type="number" id="4">
<input type="button" value="dodaj" onClick="dodaj4()"><br>
<p id="wynik4"></p>

<b>Waga 5</b><input type="number" id="5" placeholder="Wpisz tu pojedyńczą ocenę">
<input type="button" value="dodaj" onClick="dodaj5()"><br>
<p id="wynik5"></p>

<b>Waga 6</b><input type="number" id="6">
<input type="button" value="dodaj" onClick="dodaj6()"><br>
<p id="wynik6"></p>
<p id="wynikost"></p>


<script>
var zlicz=0;
var wyn=0;
function dodaj1(){
	var ocena=document.getElementById("1").value;
	zlicz++;
	document.getElementById("wynik1").innerHTML+=ocena+", ";
	console.log("ZLICZANIE: "+zlicz);
	console.log("OCENA: "+ocena);
	wyn=wyn+ocena*1;
	var git=(wyn/zlicz);
	funkcja(git);
}

function dodaj2(){
	var ocena=document.getElementById("2").value;
	zlicz=zlicz+2;
	document.getElementById("wynik2").innerHTML+=ocena+", ";
	console.log("ZLICZANIE: "+zlicz);
	console.log("OCENA: "+ocena);
	wyn=wyn+ocena*2;
	var git=(wyn/zlicz);
	funkcja(git);
}

function dodaj3(){
	var ocena=document.getElementById("3").value;
	zlicz=zlicz+3;
	document.getElementById("wynik3").innerHTML+=ocena+", ";
	console.log("ZLICZANIE: "+zlicz);
	console.log("OCENA: "+ocena);
	wyn=wyn+ocena*3;
	var git=(wyn/zlicz);
	funkcja(git);
}

function dodaj4(){
	var ocena=document.getElementById("4").value;
	zlicz=zlicz+4;
	document.getElementById("wynik4").innerHTML+=ocena+", ";
	console.log("ZLICZANIE: "+zlicz);
	console.log("OCENA: "+ocena);
	wyn=wyn+ocena*4;
	var git=(wyn/zlicz);
	funkcja(git);
}

function dodaj5(){
	var ocena=document.getElementById("5").value;
	zlicz=zlicz+5;
	document.getElementById("wynik5").innerHTML+=ocena+", ";
	console.log("ZLICZANIE: "+zlicz);
	console.log("OCENA: "+ocena);
	wyn=wyn+ocena*5;
	var git=(wyn/zlicz);
	funkcja(git);
}


function dodaj6(){
	var ocena=document.getElementById("6").value;
	zlicz=zlicz+6;
	document.getElementById("wynik6").innerHTML+=ocena+", ";
	console.log("ZLICZANIE: "+zlicz);
	console.log("OCENA: "+ocena);
	wyn=wyn+ocena*6;
	var git=(wyn/zlicz);
	funkcja(git);
}


function funkcja(git)
{
	document.getElementById("wynikost").innerHTML="WYNIK OCEN: "+wyn+"<br>";
	document.getElementById("wynikost").innerHTML+="WYNIKOL: "+git;
	
}
</script>

 

4
komentarz 10 marca 2021 przez Author[] Gaduła (3,130 p.)
do usuwania elementów ze struktury DOM służy metoda "element.remove()"
6
komentarz 10 marca 2021 przez Lavaganza Użytkownik (660 p.)
funkcja dodaj robi kazda to samo wiec zrob tylko jedna funkcje zamiast powtarzac je
komentarz 11 marca 2021 przez Kalindoreks Użytkownik (620 p.)

@Author[], ale w jaki sposób mogę to zrobić, żeby usuwała się ona po kliknięciu bo przecież musi to mieć jakieś zdarzenie, a ta ocena nie może być buttonem. Przepraszam, że po tak długim czasie odpisuje

 

3
komentarz 11 marca 2021 przez Author[] Gaduła (3,130 p.)

Zdarzenie onclick może być emitowane dla wielu elementów nie tylko buttonów

Kod js:

 

let elements=document.getElementsByClassName("input") //najlepiej nadać elementowi klasę żeby nie dodawać eventListenera do każdego elementu oddzialnie*/

elements.forEach((e)=>{ //pętlę forEach można zastąpić zwyczajną pętlą for
e.addEventListener('click', (event)=>{ //strzałkowa funkcja anonimowa
let target = event.target; //pobieranie klikniętego elementu
/*jeżeli kliknięty element ma elementy potomne to użyć event.currentTarget zamiast event.target*/
target.remove(); //usuwam element
},false); //dodałem false w celu wsparcia starszych przeglądarek
})

Oczywiście po tej operacji powinieneś zaktualizować wynik

Wytłumaczenie:

  • dałem addEventListener żeby nie blokować zdarzenia
  • event.target oznacza element kliknięty (niekoniecznie element z eventListenerem) poczytać o tym możesz tu: MDN
3
komentarz 11 marca 2021 przez Author[] Gaduła (3,130 p.)

Po drugie chciałbym dać ci kilka porad:

  • Do zwykłego przypisania tekstu używaj element.textContent lub element.innerText - metody te są szybsze i bezpieczniejsze
  • Zamiast tylu funkcji można użyć jednej która jako parametr przyjmowała by element
  • Pamiętaj że id jest niepowtarzalne więc w większej stronie tego typu id może spowodować wystąpienie błędu 

1 odpowiedź

+1 głos
odpowiedź 12 marca 2021 przez VBService Ekspert (254,490 p.)
wybrane 14 marca 2021 przez Kalindoreks
 
Najlepsza

A może do każdego ... 

<p id="wynik1"></p>

. . .

<p id="wynik2"></p>

itd...

... dopisz contenteditable  wink

<p id="wynik1" contenteditable="true"></p>

. . .

<p id="wynik2" contenteditable="true"></p>

i dodanie do tego co masz już kodu, ten kod ...

[...document.querySelectorAll('p[contenteditable]')].forEach(p_wynik => {
  p_wynik.addEventListener('keypress', e => {
    const code = e.key || e.keyCode || e.which;
    if (code == 13 || code == 'Enter') {
      e.preventDefault();
      e.target.blur();
      return false;
    }
  })
});

kliknięcie w pole (tag) <p>, lewym myszy, start edycja, Enter klawisz, koniec edycji.  wink

Podobne pytania

0 głosów
3 odpowiedzi 813 wizyt
0 głosów
1 odpowiedź 578 wizyt
pytanie zadane 8 listopada 2017 w C i C++ przez dominiv2604 Początkujący (350 p.)
+1 głos
1 odpowiedź 167 wizyt
pytanie zadane 30 kwietnia 2018 w JavaScript przez GracjanDogg Użytkownik (840 p.)

92,657 zapytań

141,550 odpowiedzi

319,989 komentarzy

62,026 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...