Repost nhờ giúp đỡ về Javascript

[__KUL__]

https://i.imgur.com/p8h7Ih5.png
các bác chỉ giúp em với ạ. em có đề bài là
- Nhập thông tin sau đó click nút nhập thì có 1 dòng mới được thêm vào bảng ở dưới với cái thông tin được nhập vào ở trên và không có điểm trung bình.
- Click nút "tính điểm trung bình" thì cột điểm trung bình được điền vào.
- click nút "Xếp loại" thì những người có điểm trung bình >= 8 sẽ chuyển màu đỏ

[Chaien at IS]

thím hiểu được gì và làm được những gì rồi

[xshatter]

JS thuần (pure) hay dùng Framework (JQuery chẳng hạn) hả bạn?

[zzchaolegionzz]

Nhờ giúp chung chung vậy sao giúp được. Thím muốn hỏi cái gì? Và đề bài yêu cầu sử dụng công cụ nào? JS thuần + DOM, jquery, react...
Nếu thím dùng JS thuần thì từ khóa là Javascript, DOM, HTML DOM Style. Cứ search ngắn gọn để giải quyết từng cái 1
- Render DOM form, table, button...
- HTML form submit
- Edit DOM element
...
Goodluck.

[ThuyVyKhanh]

Lướt voz thấy bác cần nên quẩy tí.

Bác tạo file html rồi ném vào :sosad:, có gì tự sửa theo ý bác ạ!

Trình còi mong các bác thông cảm :adore:

https://forums.voz.vn/attachment.php?attachmentid=989353&stc=1&d=1578378795







Class Markshjt

body {
text-align: center;
}
label span {
display: inline-block;
width: 150px;
font-weight: bold;
text-align: left;
cursor: pointer;
}
label input {
width: 180px;
}
.item {
margin-bottom: 20px;
}
.item.error {
color: #FF0000;
}
.input.error {
border-color: #FF0000;
}
.ketqua {
text-align: center;
}
.kq {
background-color: #F4F7F8;
resize: horizontal;
overflow: hidden;
display: flex;
margin: 1em;
}
.kq > * {
margin: 0.5em;
padding: 0.5em;
min-width: 0;
background-color: #FeFeFe;
width: 17%;
}
.kq .stt {
width: 7%;
}
.kq .hoten {
width: 25%;
}
.kq.top {
font-weight: bold;
}
.hocsinhgioi {
color: #FF0000;
font-weight: bold;
}









Class Markshjt


<span>Họ Tên:</span>





<span>Điểm Toán:</span>





<span>Điểm Lý:</span>





<span>Điểm Hóa:</span>
















STT

Họ Tên

Toán

Lý

Hóa

Trung Bình








var form_bieumau1 = document.getElementById('bieumau1');
var ds_ketqua = document.getElementById('ketqua');
var btn_nhap = document.getElementById('nhap');
var btn_diemtrungbinh = document.getElementById('diemtrungbinh');
var btn_hocsinhgioi = document.getElementById('hocsinhgioi');

form_bieumau1.addEventListener('submit', function(evt){

evt.preventDefault();

var hoten = document.getElementById('hoten').value.trim();
var diemtoan = document.getElementById('diemtoan').value;
var diemly = document.getElementById('diemly').value;
var diemhoa = document.getElementById('diemhoa').value;

var ketqua = document.createElement('div');
ketqua.setAttribute('class', 'kq diem');

var cot = ['stt', 'hoten', 'toan', 'ly', 'hoa', 'tb'];

cot.forEach(function(item){

var div = document.createElement('div');
div.setAttribute('class', item);

var textnode = document.createTextNode('');

switch(item){
case 'stt':
textnode = document.createTextNode(ds_ketqua.querySelectorAll('.kq.diem').length+1);
break;

case 'hoten':
textnode = document.createTextNode(hoten);
break;

case 'toan':
textnode = document.createTextNode(diemtoan);
div.setAttribute('data-point', diemtoan);
break;

case 'ly':
textnode = document.createTextNode(diemly);
div.setAttribute('data-point', diemly);
break;

case 'hoa':
textnode = document.createTextNode(diemhoa);
div.setAttribute('data-point', diemhoa);
break;
}

div.appendChild(textnode);
ketqua.appendChild(div);
});

ds_ketqua.appendChild(ketqua);

this.reset();

return false;
});

btn_diemtrungbinh.addEventListener('click', function(evt){

ds_ketqua.querySelectorAll('.kq.diem').forEach(function(elm){
diemtrungbinh = ( Number(elm.getElementsByClassName('toan')[0].getAttribute('data-point')) + Number(elm.getElementsByClassName('ly')[0].getAttribute('data-point')) + Number(elm.getElementsByClassName('hoa')[0].getAttribute('data-point')) ) / 3;
diemtrungbinh = diemtrungbinh.toFixed(1);

elm.setAttribute('data-tb', diemtrungbinh);
elm.getElementsByClassName('tb')[0].innerHTML = diemtrungbinh;
elm.getElementsByClassName('tb')[0].setAttribute('data-point', diemtrungbinh);
});

return false;
});

btn_hocsinhgioi.addEventListener('click', function(evt){
ds_ketqua.querySelectorAll('.kq.diem').forEach(function(elm){
if(Number(elm.getAttribute('data-tb')) &gt;= 8){
elm.classList.add('hocsinhgioi');
}else{
elm.classList.remove('hocsinhgioi');
}
});

return false;
});