Ввод из input в массив

@Sunriderrus · Регистрация: 20.08.2019

Студворк — интернет-сервис помощи студентам

Добрый день. Я только начинаю программировать в js и хочу создать следующий скрипт: имеется строка, которая меняется каждые 2 секунды. Всего в массиве 3 элемента, 2 из них введены в самом js, а третий вводится через input и заносится как переменная в массив.

PHP/HTML
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
<html>
<head>
<meta charset="utf-8">
    <title>Пример создания страницы html в блокноте</title>
</head>
<link rel='stylesheet' type='text/css' href='2.css'>
<body>
<input type="text" id="userInput"=>give me input</input>
    <button onclick="test()">Submit</button>
 
 
<div class='header0'>
</div>
<div class='header2'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
 
        
$(function () {
a = document.getElementById("userInput").value;
    cuenta = 0;
 
    textArray = ["text1", "text2", a];
    setInterval (function () {
        cuenta++;
        $("#titulos").fadeOut(100, function () {
            $(this).text(textArray [cuenta % textArray.length]).fadeIn(500);
        });
    }, 4000);
});
document.write(a);
</script>
 
 
<div>
<p id="titulos">text1</p>
</div>
 
</div>
 
</body>
</html>

Но после ввода данных в поле вместо третьей строки ничего не отображается. Я не понимаю в чем ошибка

@shvyrevvg · 01.09.2019, 07:57

Сообщение от Sunriderrus

Но после ввода данных в поле вместо третьей строки ничего не отображается.

Sunriderrus, Вы только 1 раз прочитали значение из инпута(20стр.), переменная "a" волшебным образом сама должна обновиться после ввода?

@Sunriderrus · 01.09.2019, 09:43 **[ТС]**

как ее обновить?

Добавлено через 1 час 41 минуту
изменил код

PHP/HTML
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
<html>
<head>
<meta charset="utf-8">
    <title>Пример создания страницы html в блокноте</title>
</head>
<link rel='stylesheet' type='text/css' href='2.css'>
<body>
<input type="text" id="userInput"=>give me input</input>
    <button onclick="test()">Submit</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
        function test()
        {
            var userInput = document.getElementById("userInput").value;
            
        }
 
 
        
$(function () {
    cuenta = 0;
 
    textArray = ["text1", "text2", userInput];
    setInterval (function () {
        cuenta++;
        $("#titulos").fadeOut(100, function () {
            $(this).text(textArray [cuenta % textArray.length]).fadeIn(500);
        });
    }, 4000);
});
document.write(a);
</script>
 
 
<div>
<p id="titulos">text1</p>
</div>
 
 
 
</body>
</html>

теперь вместо 3 выводит [object HTMLInputElement]

@amr-now · 01.09.2019, 12:23

Sunriderrus, здравствуйте.
Если целью было сделать змейку из элементов массива, то так:

PHP/HTML
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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Пример создания страницы html в блокноте</title>
</head>
<!-- <link rel='stylesheet' type='text/css' href='2.css'> --><!-- У меня отсутствует -->
 
<body>
    <input id="userInput" value="give me input" /><!-- Была ошибка -->
    <button type="button">Submit</button> <!-- Здесь лучше type="button" -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script>
        var textArray; // Сначала нужно объявить переменную до её использования.
        function test() {
            textArray.push($("#userInput").val());
        }
 
        $(function () {
            var cuenta = 0;
 
            textArray = ["text1", "text2"];
            setInterval(function () {
                cuenta++;
                $("#titulos").fadeOut(100, function () {
                    $(this).text(textArray[cuenta % textArray.length]).fadeIn(500);
                });
            }, 2000);
 
            $("button").on("click", test);
        });
        // document.write(a); // Лишняя деталь.
    </script>
 
    <div>
        <p id="titulos">text1</p>
    </div>
</body>
</html>

Рекомендация - блокнот не используйте. Привыкайте к VS Code от Microsoft или к продукту от конкурентов из Java-мира.

А за fade респект. Прикольно ))

Добавлено через 1 минуту
----
Как вариант - можно бесконечно подменять третий элемент массива. По желанию.

@Sunriderrus · 01.09.2019, 13:49 **[ТС]**

Это офигенно, спасибо большое)

Добавлено через 27 минут
Есть еще один вопрос: а возможно и передать в массив javacript строки из базы данных mysql?

@amr-now · 01.09.2019, 14:08

Сообщение от Sunriderrus

возможно и передать в массив javacript строки из базы данных mysql?

Двумя способами:
1) Каждый раз обновлять страницу. В адресной строке возможно будет меняться адрес. Все строки и их внешний вид готовит полностью сервер.
2) AJAX. Страница не обновляется. В адресной строке адрес не меняется. Запросы посылает на сервер сам JavaScript из браузера, как взрослый.

Новые блоги и статьи Все статьи Все блоги /
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .
Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .

@Sunriderrus 0 / 0 / 0 Регистрация: 20.08.2019 Сообщений: 10
	01.09.2019, 13:49 [ТС]
	Это офигенно, спасибо большое) Добавлено через 27 минут Есть еще один вопрос: а возможно и передать в массив javacript строки из базы данных mysql? 0

Ввод из input в массив

Решение