script.js 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. let afooter = document.querySelector("#afooter");
  2. let bfooter = document.querySelector("#bfooter");
  3. let calculeit = document.querySelector("#calculeit");
  4. let output = document.querySelector("#output");
  5. calculeit.addEventListener("click", function(){ calc });
  6. function calc() {
  7. output.value = ((+afooter.value) + (+bfooter.value));
  8. };
  9. afooter.oninput = calc;
  10. bfooter.oninput = calc;
  11. let table = document.createElement("table");
  12. let src = document.querySelector("script");
  13. let td = document.getElementsByTagName("td");
  14. let tr = document.getElementsByTagName("tr");
  15. document.body.insertBefore(table, src);
  16. let namb = "";
  17. for (let i = 0; i < 10; i++){
  18. namb += "<tr>"
  19. for (let j = 0; j < 10; j++){
  20. if (i == 0){namb += "<td>" + j + "</td>";}
  21. else {namb += "<td>" + i * (j === 0 ? 1 : j) + "</td>";}
  22. }
  23. namb += "</tr>"
  24. }
  25. table.innerHTML = namb
  26. for (let i = 0; i < 100; i++) {
  27. td[i].addEventListener("mouseover", function(){
  28. for (let x = 0; x < 10; x++){td[i].parentElement.children[x].style.backgroundColor = "#98f9d2";}
  29. for (let y = 0; y < 100; y++){if (td[i].cellIndex === td[y].cellIndex)
  30. {td[y].style.backgroundColor = "#98f9d2"
  31. };
  32. };
  33. });
  34. td[i].addEventListener("mouseout", function(){
  35. for (let x = 0; x < 10; x++) {td[i].parentElement.children[x].style.backgroundColor = "#b3fcde";};
  36. for (let y = 0; y < 100; y++) {
  37. if (td[i].cellIndex === td[y].cellIndex) {td[y].style.backgroundColor = "#b3fcde";};
  38. };
  39. });
  40. };