How to fix document is not defined error in ElectronJS?

D

Dubolom Unicellular2020-04-26 00:12:38

JavaScript

Dubolom Unicellular, 2020-04-26 00:12:38

I tried to access the element through document (Remember, I use electronJS):
main.js:

const path = require('path');
const url = require('url');
const {app, BrowserWindow} = require('electron');
let win;

// Функция открытия приложения
function createWindow() {
  // Параметры приложения
  win = new BrowserWindow({
    width: 1000,
    height: 600,
    icon: __dirname + "/img/favicon.svg",
    frame: false
  });
  // win.setMenu(null);

  // Где будет распологаться главная страница
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }));

  // Открытие инспектора
  // win.webContents.openDevTools();

  // Закрытие по нажатию кнопки "Закрыть" в html
 document.querySelector('.close').addEventListener('click', () => {
    console.log(win);
  });
 }
  // Открывать после команды запуска (npm start)
  app.on('ready', createWindow);

But I got an error document is not defined

Here is index.html:

<!DOCTYPE html>
<html lang="ru" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Конвертор Температуры</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
<!-- Этот html показывает иконку крестика, и должно при нажатии на него в js закрыться окно -->
    <div class="title-bar">
      <div class="window-controls">
        <div class="close">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M13 1L7 7M1 13L7 7M7 7L1 1M7 7L13 13" stroke="black"/>
          </svg>
        </div>
      </div>
    </div>
    <div class="loader">
      <div class="loader__container">
        <h1 class="loader__container__counter"></h1>
        <h2 class="loader__container__loading">Загрузка...</h2>
      </div>
      <div class="loader__layer"></div>
    </div>
    <header class="left-bar__menu" id="treeMenu">
      <div class="left-bar__widget widget-disabled">
        <div class="menu-icon__wrapper" id="menu" title="Меню">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </div>
      </div>
      <div class="left-bar__widget">
        <div class="left-bar__icon-wrapper">
          <svg xmlns="http://www.w3.org/2000/svg" height="512" viewBox="0 0 64 64" width="512"><rect fill="#2d75bb" height="58" rx="2" width="34" x="15" y="3"/><path d="m18 22h2v2h-2z" fill="#fcf05a"/><path d="m22 22h2v2h-2z" fill="#fcf05a"/><path d="m26 22h2v2h-2z" fill="#fcf05a"/><path d="m30 22h2v2h-2z" fill="#fcf05a"/><path d="m19 7h26v12h-26z" fill="#87cee9"/><g fill="#21537c"><path d="m19 27h6v6h-6z"/><path d="m29 27h6v6h-6z"/><path d="m39 27h6v6h-6z"/><path d="m19 37h6v6h-6z"/><path d="m29 37h6v6h-6z"/><path d="m19 47h6v6h-6z"/><path d="m29 47h6v6h-6z"/><path d="m39 37h6v16h-6z"/></g><path d="m15 56h11v2h-11z" fill="#87cee9"/><path d="m38 56h11v2h-11z" fill="#87cee9"/><path d="m34 56h2v2h-2z" fill="#87cee9"/><path d="m32.379 12.5h4.243v2h-4.243z" fill="#f4f4e6" transform="matrix(.707 -.707 .707 .707 .559 28.349)"/><path d="m27.379 12.5h4.243v2h-4.243z" fill="#f4f4e6" transform="matrix(.707 -.707 .707 .707 -.906 24.814)"/></svg>
        </div>
        <h3>Тип Конвертора</h3>
        <p>Выберете тип конвертора, с которым хотите работать.</p>
      </div>
      <div class="left-bar__widget">
        <div class="left-bar__icon-wrapper">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 502.596 502.596" style="enable-background:new 0 0 502.596 502.596;" xml:space="preserve">
        <path style="fill:#84DBFF;" d="M336.98,141.061c-3.135-12.539-8.359-25.078-14.629-36.571l12.539-29.257l-43.886-42.841  l-29.257,12.539c-11.494-6.269-22.988-11.494-36.571-14.629L214.727,0h-61.649l-11.494,30.302  c-12.539,3.135-25.078,8.359-36.571,14.629L75.755,32.392L32.914,75.233l12.539,29.257c-6.269,11.494-11.494,22.988-14.629,36.571  L0.522,152.555v61.649l30.302,11.494c3.135,12.539,8.359,25.078,14.629,36.571l-12.539,29.257L76.8,334.367l29.257-12.539  c11.494,6.269,22.988,11.494,36.571,14.629l11.494,30.302h60.604l11.494-30.302c12.539-3.135,25.078-8.359,36.571-14.629  l29.257,12.539l43.886-42.841l-12.539-29.257c6.269-11.494,11.494-22.988,14.629-36.571l30.302-11.494v-61.649L336.98,141.061z   M183.38,258.09c-41.796,0-75.233-33.437-75.233-75.233s33.437-75.233,75.233-75.233s75.233,33.437,75.233,75.233  S225.176,258.09,183.38,258.09z"/>
        <g>
        	<path style="fill:#54C0EB;" d="M236.669,236.147c-29.257,29.257-76.278,29.257-105.535,0l-27.167,27.167   c43.886,43.886,115.984,43.886,159.869,0s43.886-114.939,0-159.869l-27.167,27.167C265.927,159.869,265.927,206.89,236.669,236.147   z"/>
        	<path style="fill:#54C0EB;" d="M103.967,103.445c-43.886,43.886-43.886,114.939,0,159.869l27.167-27.167   c-29.257-29.257-29.257-76.278,0-105.535s76.278-29.257,105.535,0l27.167-27.167C219.951,59.559,147.853,59.559,103.967,103.445z"/>
        </g>
        <path style="fill:#4CDBC4;" d="M354.743,428.408c1.045-6.269,1.045-11.494,0-17.763l10.449-10.449l-10.449-26.122h-14.629  c-3.135-4.18-8.359-8.359-12.539-12.539v-14.629l-26.122-10.449l-10.449,10.449c-6.269-1.045-11.494-1.045-17.763,0l-10.449-10.449  l-26.122,10.449v14.629c-4.18,3.135-8.359,8.359-12.539,12.539h-14.629l-10.449,26.122l10.449,10.449  c-1.045,6.269-1.045,11.494,0,17.763l-10.449,10.449l10.449,26.122h14.629c3.135,4.18,8.359,8.359,12.539,12.539v14.629  l26.122,10.449l10.449-10.449c6.269,1.045,11.494,1.045,17.763,0l10.449,10.449l26.122-10.449v-14.629  c4.18-3.135,8.359-8.359,12.539-12.539h14.629l10.449-26.122L354.743,428.408z M271.151,450.351  c-17.763-7.314-26.122-27.167-18.808-43.886c7.314-17.763,27.167-26.122,43.886-18.808c17.763,7.314,26.122,27.167,18.808,43.886  C307.722,449.306,287.869,457.665,271.151,450.351z"/>
        <path style="fill:#FF7058;" d="M491.624,291.527c1.045-6.269,1.045-11.494,0-17.763l10.449-10.449l-10.449-26.122h-14.629  c-3.135-4.18-8.359-8.359-12.539-12.539v-14.629l-26.122-10.449l-10.449,10.449c-6.269-1.045-11.494-1.045-17.763,0l-10.449-10.449  l-26.122,10.449v14.629c-4.18,3.135-8.359,8.359-12.539,12.539h-14.629l-10.449,26.122l10.449,10.449  c-1.045,6.269-1.045,11.494,0,17.763l-10.449,10.449l10.449,26.122h14.629c3.135,4.18,8.359,8.359,12.539,12.539v14.629  l26.122,10.449l10.449-10.449c6.269,1.045,11.494,1.045,17.763,0l10.449,10.449l26.122-10.449v-14.629  c4.18-3.135,8.359-8.359,12.539-12.539h14.629l10.449-26.122L491.624,291.527z M406.988,314.514  c-17.763-7.314-26.122-27.167-18.808-43.886c7.314-17.763,27.167-26.122,43.886-18.808c17.763,7.314,26.122,27.167,18.808,43.886  C444.604,313.469,424.751,321.829,406.988,314.514z"/>
        <g></g><g></g><g></g><g></g><g></g><g></g><g></g><g>
        </g><g></g><g></g><g></g><g></g><g></g><g></g><g></g>
          </svg>
        </div>
        <h3>Настройки</h3>
        <p>Подстройте приложение под себя, с помощью настроек.</p>
      </div>
    </header>
    <main>
      <section class="root">
        <div class="flex-column">
          <h1>Конвертор Температуры</h1>
        </div>
        <div class="flex-column">
          <input type="number" id="celcius" placeholder="Введите Цельсии" onkeyup="CelciusToFahrenheit()">
          <input type="number" id="fahrenheit" placeholder="Введите Фаренгейты" onkeyup="fahrenheitToCelcius()">
        </div>
      </section>
    </main>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
    <script src="js/main.js"></script>
    <script type="text/javascript">
    const loader = ".loader",
          loaderCounter = $(".loader__container__counter"),
          loaderLayer = $(".loader__layer");

      // Timer
      let counter = 0;
      const loaderTimer = setInterval(function() {
      counter++;
      const tl = anime.timeline();
      tl.add({
      targets: ".loader__layer",
      duration: 0,
      width: counter + "%"
      });
      if(counter == 100){
      clearInterval(loaderTimer);
      tl.add({
        targets: [".loader", ".loader__layer", ".loader__container"],
        duration: 700,
        visibility: "hidden",
        translateY: "-100%",
        easing: 'easeInExpo',
        delay: 300
      });
      }
      loaderCounter.html(counter + '%');
      // loaderLayer.css({width: counter + "%"});
    }, 20);

      // Находим и вписываем в переменные поля ввода
        var celciusInput = document.getElementById('celcius');
        var fahrenheitInput = document.getElementById('fahrenheit');

      // Цельсии в фаренгейты
        function CelciusToFahrenheit() {
          let celcius = celciusInput.value;
          let fahrenheit = (celcius * 9/5) + 32;
          fahrenheitInput.value = fahrenheit;
        }

      // Фаренгейты в цельсии
        function fahrenheitToCelcius() {
          let fahrenheit = fahrenheitInput.value;
          let celcius = (fahrenheit - 32) * 5/9;
          celciusInput.value = celcius;
        }

      // Подключаю рендер для Электрона
        // require('./renderer.js');
    </script>
  </body>
</html>

How to solve it

Reply

Answer the question

In order to leave comments, you need to log in

0 answer(s)