8 Posts - Answer Overflow

•Created by 8 on 7/31/2023 in #front-end

document.getElementById() not working

Hello, I tried to use event listener on an element but document.getElementById() returns null instead of the element. The problem is that I can't find any problem and I tired the code on multiple online compiler and it worked in all of them but it doesn't work on VScode. HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
  </head>
  <body>
    <button id="test">test</button>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
  </head>
  <body>
    <button id="test">test</button>
  </body>
</html>

JavaScript:

let test = document.getElementById("test");
console.log(test);

test.addEventListener("click", () => {
  console.log("test passed");
});

let test = document.getElementById("test");
console.log(test);

test.addEventListener("click", () => {
  console.log("test passed");
});

7 replies

KPCKevin Powell - Community

•Created by 8 on 6/4/2023 in #front-end

Shopping cart total price does not update

Hello, I am creating a shopping cart from this tutorial: https://www.youtube.com/watch?v=YeFzkC2awTM&t=940s but when I add new items the total price counter does not update and I can add two of the same item This is my code: https://codepen.io/SuperTesmon/pen/OJaLLWX

8 replies

KPCKevin Powell - Community

•Created by 8 on 6/3/2023 in #front-end

innerText is undefined

I am trying to code a very basic shop for a school project and I tried to get the price of a product by using innerText in a function to update the total price in the cart but when I checked in the console I get this error: caught TypeError: Cannot read properties of undefined (reading 'innerText') The function code:

function updateTotal() {
  let cartItemContainer = document.getElementsByClassName("cart-table")[0];
  let cartRows = cartItemContainer.getElementsByClassName("cart-row");
  for (let i = 0; i < cartRows.length; i++) {
    let cartRow = cartRows[i];
    let priceElement = cartRow.getElementsByClassName("cart-price")[0];
    let amountElement = cartRow.getElementsByClassName("amount-input")[0];
    let price = priceElement.innerText;
  }
}

function updateTotal() {
  let cartItemContainer = document.getElementsByClassName("cart-table")[0];
  let cartRows = cartItemContainer.getElementsByClassName("cart-row");
  for (let i = 0; i < cartRows.length; i++) {
    let cartRow = cartRows[i];
    let priceElement = cartRow.getElementsByClassName("cart-price")[0];
    let amountElement = cartRow.getElementsByClassName("amount-input")[0];
    let price = priceElement.innerText;
  }
}

25 replies

KPCKevin Powell - Community

•Created by 8 on 5/17/2023 in #front-end

How to make a section responsive to screen size?

Hello, I have a section with text and Image side by side. (Text on the right, image on the left) I know how to use CSS @media max-width and min-with but I am using display flex on the section to make the image side by side with the text and it doesn't work now. HTML code: https://pastebin.com/sZm8TS75 CSS code: https://pastebin.com/3L3sNAD2

6 replies

Gaming

Programming