Javascript yardım

16-01-2024, 07:41:58

Merhaba,
Html kodumda onclick fonksiyonu ile js dosyama veri aktarmam gerekiyor ancak yapamıyorum. Modül olarak eklemem gerekiyor çünkü ana projemde index.js dosyamda import dosyalarım var. bir çözüm öneriniz var mıdır aldığım hata bu şekilde:

TEST/:16 Uncaught ReferenceError: changeCategory is not defined
    at HTMLDivElement.onclick (TEST/:16:69)

Kodum basitleştirilmiş bir şekilde böyle:
HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
  </head>  
  <body>
<script type="module" src="./index.js"></script>
<script type="module">
    import { changeCategory } from './index.js';
</script>
    <div id="container"></div>
    <div class="header">
      <div class="menu">
          <div class="menu-item" onclick="changeCategory('tshirt')">Tişört</div>
          <div class="menu-item" onclick="changeCategory('shoes')">Ayakkabı</div>
          <div class="menu-item" onclick="changeCategory('jewelry')">Takı</div>
          <div class="menu-item" onclick="changeCategory('accessories')">Aksesuar</div>
      </div>
  </div>
</body>
</html>

JS:

export function changeCategory(category) {
    console.log(category);
}

16-01-2024, 09:20:50

darness

merhaba 2 yöntemle çözebilirsiniz.
1.yöntem
index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
  </head>  
  <body>
    <script type="module" src="index.js"></script>
    
    <div id="container"></div>
    <div class="header">
      <div class="menu">
          <div class="menu-item" onclick="changeCategory('tshirt')">Tişört</div>
          <div class="menu-item" onclick="changeCategory('shoes')">Ayakkabı</div>
          <div class="menu-item" onclick="changeCategory('jewelry')">Takı</div>
          <div class="menu-item" onclick="changeCategory('accessories')">Aksesuar</div>
      </div>
  </div>
</body>
</html>

index.js
(changeCategory fonksiyonu global tanımlanabilir)

export function changeCategory(category) {
    console.log(category);
}
window.changeCategory = changeCategory;

2. yöntem
js ile click aksiyonu alınabilir.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
  </head>  
  <body>
    <div id="container"></div>
    <div class="header">
      <div class="menu">
          <div class="menu-item" data-category="tshirt" >Tişört</div>
          <div class="menu-item" data-category="shoes">Ayakkabı</div>
          <div class="menu-item" data-category="jewelry">Takı</div>
          <div class="menu-item" data-category="accessories">Aksesuar</div>
      </div>
    </div>
    <script type="module" src="index.js"></script>
</body>
</html>

export function changeCategory(category) {
    console.log(category);
}

const menuItems = [...document.querySelectorAll('.menu-item')];
menuItems.forEach((item) => item.onclick = () => changeCategory(item.dataset.category) )

16-01-2024, 16:42:43

VEDANTA

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
  </head>
  <body>
    <script type="module">
      import { changeCategory } from "./index.js";
      window.changeCategory = changeCategory;
    </script>
    <div id="container"></div>
    <div class="header">
      <div class="menu">
        <div class="menu-item" onclick="changeCategory('tshirt')">Tişört</div>
        <div class="menu-item" onclick="changeCategory('shoes')">Ayakkabı</div>
        <div class="menu-item" onclick="changeCategory('jewelry')">Takı</div>
        <div class="menu-item" onclick="changeCategory('accessories')">
          Aksesuar
        </div>
      </div>
    </div>
  </body>
</html>