Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » вопросы по javascript

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки
Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117

Открыть новую тему     Написать ответ в эту тему

blaro



Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Привет всем. Такой вопрос: учусь делать Drag-n-drop загрузку. Списал пример с сайта, чтобы понять как всё устроенно. Но вот при попытке вылетает сообщение об ошибке

Код:
 
Uncaught TypeError: files is undefined
    handleFiles http://127.0.0.1:5500/addFile.js:51
    handleDrop http://127.0.0.1:5500/addFile.js:37
    EventListener.handleEvent* http://127.0.0.1:5500/addFile.js:33
addFile.js:51:12
    handleFiles http://127.0.0.1:5500/addFile.js:51
    handleDrop http://127.0.0.1:5500/addFile.js:37
    (Async: EventListener.handleEvent)
    <anonymous> http://127.0.0.1:5500/addFile.js:33
 

Эта ошибка возникает в функции handleFiles, в строке files=[...files] (подчеркивает красным только многоточие). Не могу понять почему возникает ошибка. Подозреваю что данные из одной функции не передаются в другую. Далее приведу HTML и JavaScript

Код:
 
<div id="dragndroparea">
                <form class="my-form">
                    <p>Upload multiple files with the file dialog or by dragging and dropping images onto the dashed region</p>
                    <input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)">
                    <label class="button" for="fileElem">Select files</label>
                </form>
                <progress id="progress-bar" max=100 value=0></progress>
                <div id="gallery"></div>
            </div>
 

"JavaScript"

Всего записей: 311 | Зарегистр. 29-01-2006 | Отправлено: 07:00 05-10-2020
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
blaro

Цитата:
Uncaught TypeError: files is undefined
 

переменная files неопределена.

Цитата:
(подчеркивает красным только многоточие)

зависит от используемого редактора, так как это синтаксис новых версий js
 
можно определить посмотрев чему равны переменные в  

Цитата:
function handleDrop(e){
  let dt=e.dataTransfer;
  let files=dt.file;
  handleFiles(files);
}

 
ну либо onchange="handleFiles(this.files)"
смотреть что представляем собой this.files.
скорее всего срабатывает обработчик выше
dropArea.addEventListener('drop',handleDrop,false);
и событие не передает нужные данные
 
ну и смотрите консоль ошибок браузера на наличие сообщений

Всего записей: 15223 | Зарегистр. 20-09-2014 | Отправлено: 08:19 05-10-2020 | Исправлено: Mavrikii, 08:25 05-10-2020
blaro



Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Mavrikii
Спасибо вам за ваш ответ. Я сегодня нашел причину.  Я просто стёр одну строку и выглядит сейчас так:
Было

Код:
 
function handleDrop(e){
  let dt=e.dataTransfer;
  let files=dt.file;
  handleFiles(files);
}  
 

Стало

Код:
 
function handleDrop(e){
  let files=e.dataTransfer.files;
  handleFiles(files);
}
 

Я не знаю почему функция не работала. Вобщем пошёл я дальше ковырять работу. Пойду поищу что можно в CSS сделать с Progress bar.

Всего записей: 311 | Зарегистр. 29-01-2006 | Отправлено: 21:22 05-10-2020
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
blaro

Цитата:
Я не знаю почему функция не работала

потому, что .file != .files

Всего записей: 15223 | Зарегистр. 20-09-2014 | Отправлено: 00:50 06-10-2020
D1D1D1D

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Привет. По какой причине онлайн не срабатывает следующий скрипт, который автоматически создаёт оглавление, собирая теги H3 ? — https://jsfiddle.net/hdma/Ls8n35u6/1/  (jquery кстати там не нужно - не смог убрать его из настроек)
 
При этом локально он работает.

Всего записей: 1384 | Зарегистр. 05-04-2010 | Отправлено: 05:02 06-10-2020 | Исправлено: D1D1D1D, 05:05 06-10-2020
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
D1D1D1D

Цитата:
Uncaught TypeError: document.all.tags is not a function

document.all устаревший и неподдерживаемый всеми браузерами способ.
нужны элементы по тегам?  
document.getElementsByTagName('h3')
https://jsfiddle.net/qhjnkeam/

Всего записей: 15223 | Зарегистр. 20-09-2014 | Отправлено: 05:32 06-10-2020
D1D1D1D

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо! А возможно, чтобы переход совершался по клику? https://jsfiddle.net/hdma/73ahvd6r/2/ В IE это работает, а, в частности, в Хроме не идёт

Всего записей: 1384 | Зарегистр. 05-04-2010 | Отправлено: 06:23 06-10-2020 | Исправлено: D1D1D1D, 06:24 06-10-2020
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
D1D1D1D

Цитата:
а, в частности, в Хроме не идёт

потому, что <a name> тоже уже не используется.
добавьте нужными элементами id='...', тогда ссылка "#этот_ID" будет работать аналогично.

Всего записей: 15223 | Зарегистр. 20-09-2014 | Отправлено: 06:29 06-10-2020 | Исправлено: Mavrikii, 06:30 06-10-2020
D1D1D1D

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
 
Просьба взглянуть: https://jsfiddle.net/hdma/73ahvd6r/3/ Заменяю, но без результата

Всего записей: 1384 | Зарегистр. 05-04-2010 | Отправлено: 06:35 06-10-2020
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
D1D1D1D
id без решетки, id = 'что_то_тут', ссылка href='#что_то_тут'

Всего записей: 15223 | Зарегистр. 20-09-2014 | Отправлено: 06:37 06-10-2020
vs6262



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
у меня тут со склеиванием не получается у запятой
может кто поможет?
 
спасибо

Код:
function My_PopUp_Run(..._id_Main){
 
 //ReactDOM.render([_el_Main[_id_Main[0]],_el_Main[_id_Main[1]]], document.body);
  var _S0001 = null;
  if(1 == arguments.length) {
      _S0001 = eval('_el_Main[arguments[0]]');
  }else if(1 < arguments.length) {
      _S0001 = _el_Main[arguments[0]];
      for (var i=1; i < arguments.length; i++) {
        
        
        _S0001 = _S0001+', '+el_Main[arguments[i]];
         _S0001 = eval(_S0001);
//        alert(_S0001);
        
      }
  }
  alert(_S0001);
//    alert(longest);
eval('ReactDOM.render([_S0001], document.body);');
}

Всего записей: 2194 | Зарегистр. 25-02-2013 | Отправлено: 17:49 13-10-2020 | Исправлено: vs6262, 17:50 13-10-2020
VVL99

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
vs6262
Что такое eval?
что вы передаёте в eval и какой результат хотите получить?

----------
Гомосексуальность среди модераторов не является психическим расстройством, несмотря на синонимы этого понятия в русском языке.

Всего записей: 4158 | Зарегистр. 03-02-2011 | Отправлено: 18:02 13-10-2020
vs6262



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Код:
'ReactDOM.render([_el_Main[arguments[0]], _el_Main[arguments[1]], _el_Main[arguments[2]]], document.body);'

вот сюда мне нужно обьекты втулить по аргументам попорядку

Всего записей: 2194 | Зарегистр. 25-02-2013 | Отправлено: 18:13 13-10-2020 | Исправлено: vs6262, 18:16 13-10-2020
VVL99

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
vs6262
Ошибку в какой строке показывает, там где запятая, где eval или там где вы уже параметры передаёте в функцию?

----------
Гомосексуальность среди модераторов не является психическим расстройством, несмотря на синонимы этого понятия в русском языке.

Всего записей: 4158 | Зарегистр. 03-02-2011 | Отправлено: 18:15 13-10-2020
vs6262



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
ошибка там где красная запятая

Всего записей: 2194 | Зарегистр. 25-02-2013 | Отправлено: 18:20 13-10-2020
VVL99

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Тогда перед этой строкой сделайте проверку переменных.

Код:
console.log(_S0001, typeof _S0001);
console.log(el_Main[arguments[i]], typeof el_Main[arguments[i]])


----------
Гомосексуальность среди модераторов не является психическим расстройством, несмотря на синонимы этого понятия в русском языке.

Всего записей: 4158 | Зарегистр. 03-02-2011 | Отправлено: 18:25 13-10-2020
vs6262



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
this is the complete Code
PS: React not working in IE
 

Код:
<!DOCTYPE html>
<html>
<head>
    <!-- Тег meta для указания кодировки -->
      <meta charset="utf-8">
<!--
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
-->
<!--
    https://babeljs.io/
    https://reactjs.org/
-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
 
</head>
<body>
<script>
 
var _el_Main = new Array();
function My_PopUp_Define(_id_Main, _Left_Main, _Top_Main, _Width_Main, _Height_Main) {  
var _co = "green";
//const _el_Main = () => {null};
_el_Main[_id_Main] = React.createElement(
    "div",
    {style:{color:_co, left: _Left_Main, top: _Top_Main, width: _Width_Main, height: _Height_Main, position: 'absolute',  backgroundColor: 'red'}, id: _id_Main, className: "someClass"},
    "Here I am",
  );
   
 // _el_Main.push();
//ReactDOM.render(_el_Main, document.body);
}
function My_PopUp_Run(..._id_Main){
 
 //ReactDOM.render([_el_Main[_id_Main[0]],_el_Main[_id_Main[1]]], document.body);
   
  var _S0001 = null;
  var _S0002 = "\, ";
  if(1 == arguments.length) {
      _S0001 = eval('_el_Main[arguments[0]]');
  }else if(1 < arguments.length) {
      _S0001 = eval('_el_Main[arguments[0]]');
      for (var i=1; i < arguments.length; i++) {
        
        _S0001 = _S0001+eval(_S0002)+eval('_el_Main[arguments[i]]');
         
//        alert(_S0001);
        
      }
  }
//  _S0001 = eval(_S0001);
  alert(_S0001);
//    alert(longest);
eval('ReactDOM.render([_S0001], document.body);');
 
}
 
My_PopUp_Define("_0001", 20, 10, 200, 800);
My_PopUp_Run("_0001");
 
My_PopUp_Define("_0002", 300, 10, 200, 800);
My_PopUp_Run("_0001","_0002");
 
//document.getElementById("_0001").style.color = "blue";
 
</script>
</body>
</html>

Всего записей: 2194 | Зарегистр. 25-02-2013 | Отправлено: 20:44 13-10-2020 | Исправлено: vs6262, 20:45 13-10-2020
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
vs6262
на кой черт вам сдался React для создания простого дива?
и использование eval это плохо и очень медленно.
 

Цитата:
 _S0001 = _S0001+', '+el_Main[arguments[i]];

подчеркивания перед el_Main нет.  
 
ну и  

Цитата:
         _S0001 = eval(_S0001);

не должно быть внутри цикла. но все сделано чересчур топорно.
 
к тому же в render идет массив, тут строка и eval вообще не нужны.

Всего записей: 15223 | Зарегистр. 20-09-2014 | Отправлено: 21:11 13-10-2020 | Исправлено: Mavrikii, 23:24 13-10-2020
vs6262



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
ALL OK, for use. witout eval()
PS: в IE не работает React

Код:
<!DOCTYPE html>
<html>
<head>
    <!-- Тег meta для указания кодировки -->
      <meta charset="utf-8">
<!--
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
-->
<!--
    https://babeljs.io/
    https://reactjs.org/
-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
 
</head>
<body>
<script>
 
var _el_Main = new Array();
function My_PopUp_Define(_id_Main, _Left_Main, _Top_Main, _Width_Main, _Height_Main) {  
var _co = "green";
//const _el_Main = () => {null};
_el_Main[_id_Main] = React.createElement(
    "div",
    {style:{color:_co, left: _Left_Main, top: _Top_Main, width: _Width_Main, height: _Height_Main, position: 'absolute',  backgroundColor: 'red'}, id: _id_Main, className: "someClass"},
    "Here I am",
  );
 
}
function My_PopUp_Run(..._id_Main){
    var _S0001 = [_el_Main[arguments[0]]];
    if(1 < arguments.length) {
        for (var i=1; i < arguments.length; i++) {
            _S0001.push(_el_Main[arguments[i]]);
        }
      }
    ReactDOM.render(_S0001, document.body);
}
 
 
My_PopUp_Define("_0001", 20, 10, 200, 800);
My_PopUp_Run("_0001");
 
My_PopUp_Define("_0002", 300, 10, 200, 800);
My_PopUp_Run("_0001","_0002");
 
My_PopUp_Define("_0003", 600, 10, 200, 800);
My_PopUp_Run("_0001","_0002","_0003");
 
document.getElementById("_0001").style.color = "blue";
 
</script>
</body>
</html>


Цитата:
 ReactDOM.render([_S0001], document.body);  

исправил

Всего записей: 2194 | Зарегистр. 25-02-2013 | Отправлено: 00:23 14-10-2020 | Исправлено: vs6262, 01:17 14-10-2020
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
[_S0001]

_S0001 уже массив, зачем увеличивать вложенность?
 

Цитата:
ALL OK, for use. witout eval()

п. 1. главы VI Соглашения по использованию

Всего записей: 15223 | Зарегистр. 20-09-2014 | Отправлено: 00:27 14-10-2020
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117

Компьютерный форум Ru.Board » Интернет » Web-программирование » вопросы по javascript


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru