Как отобразить/передать текстовую информацию из .js в .html ?

@SeregIN · Регистрация: 11.08.2020

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

Помогите пожалуйста новичку, уже 2 недели мучаюсь! Возможно вопрос простой, но я что-то туплю...

Есть 2-а файла: file.html и file.js . В файле file.js содержится текстовая инфа, а в file.html находится кнопка (при нажатии на которую и должна отобразиться инфа) и ссылка на file.js .

Задача такая - при открытии file.html , чтобы отображалась только кнопка, находящаяся в ней. А при нажатии на неё уже показывалась инфа, которая лежит в отдельном файле file.js .
Проблема - никак не соображу, что прописать в file.js и в file.html , чтобы их связать...

Прикладываю пару вариантов, которые наваял:

Вариант-1.

HTML5
1
2
3
4
5
6
7
8
9
<head>
<meta charset="UTF-8">
<title>Подключение внешнего скрипта</title>
<script src="file1_1.js" type="text/javascript"></script>
</head>
 
<body>
 <input type="button" onclick="showMessage()" name="ok" value="Вопросы">
</body>

JavaScript
1
2
3
4
5
6
7
8
function showMessage() {
vopros_1 = "Площадь квадрата со стороной 4 см?";
vopros_2 = "Сколько дней мучился?";
vopros_3 = "Какая скорость самолёта при взлёте?";
vopros_4 = "Сколько дней в неделе?";
vopros_5 = "Сколько цветов в букете?";
alert(vopros_1 + '\n' + vopros_2 + '\n' + vopros_3 + '\n' + vopros_4 + '\n' + vopros_5);
}

Здесь как бы всё работает, НО, мне не нужно вывести инфу через alert (!!!), т.е. не через всплывающее окно, а просто, чтобы после нажатию на кнопку на пустой странице отобразился текст.

Вариант-2.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<head>
<meta charset="UTF-8">
<title>Подключение внешнего скрипта</title>
<script src="12-12.js" type="text/javascript"></script>
</head>
 
<body>
<div id="app1" style="display:none;">
</div>
<button onclick="(document.getElementById('app1').style.display='block')">Показать теcт</button>
<!--<input type="button" onclick="showMessage()" name="ok" value="Вопросы">-->
</body>

JavaScript
1
2
3
4
5
6
7
function document.getElementById('app1') {
vopros_1 = "Площадь квадрата со стороной 4 см?";
vopros_2 = "Сколько дней мучился?";
vopros_3 = "Какая скорость самолёта при взлёте?";
vopros_4 = "Сколько дней в неделе?";
vopros_5 = "Сколько цветов в букете?";
}

Во втором варианте возможно бред... Через document.getElementById текстовая инфа не показывается... Скорее всего я что-то не дописал...

Ооочень, ооочень прошу помочь!!!!!
Мне кажется я где-то рядом, не хватает буквально немного...(
Да и для вас, уважаемых знатоков, моя задачка наверное несложна)))

@Mr_Sergo · 12.08.2020, 02:08

честно сказать мало что понял, вот вам 2 варианта

1-ый https://codepen.io/Mr_Sergo/pen/QWNjrXZ

file.html

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Код</title>
</head>
<body>
 
<input type="button" class="btnQuestion" name="ok" value="Вопросы"></input>
 
<script src="file.js"></script>
</body>
</html>

file.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
function showMessage() {
    let arr = [
        "Площадь квадрата со стороной 4 см?",
        "Сколько дней мучился?",
        "Какая скорость самолёта при взлёте?",
        "Сколько дней в неделе?",
        "Сколько цветов в букете?"
    ]
    alert(arr.join('\n'))
}
document.querySelector('.btnQuestion').addEventListener('click', showMessage)

2-ой https://codepen.io/Mr_Sergo/pen/OJNyZKv

file.html

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Код</title>
</head>
<body>
 
<button class="showTest">Показать теcт</button>
<div id="app1" style="display:none;"></div>
 
<script src="file.js"></script>
</body>
</html>

file.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function showMessage() {
    let arr = [
        "Площадь квадрата со стороной 4 см?",
        "Сколько дней мучился?",
        "Какая скорость самолёта при взлёте?",
        "Сколько дней в неделе?",
        "Сколько цветов в букете?"
    ],
    app1 = document.querySelector('#app1')
    
    if (this.textContent == 'Показать теcт') {
        app1.style.display = 'block'
        app1.innerHTML = arr.join('<br>')
        this.textContent = 'Скрыть тест'
    }
    else {
        app1.style.display = 'none'
        this.textContent = 'Показать теcт'
    }
}
document.querySelector('.showTest').addEventListener('click', showMessage)

@SeregIN · 12.08.2020, 14:44 **[ТС]**

Mr_Sergo, ОГРОМНОЕ Вам спасибо !!!!! Вы всё правильно поняли! Второй вариант, который Вы предложили - это именно то, что мне нужно!

P.S.1. Насчёт первого моего и Вашего варианта... Может Вы не заметили, но я под ним уточнил, что хоть он и рабочий, но мне нужно БЕЗ alert (без всяких всплывающих окон). Т.е. как-то подретушировать код, чтобы смыл показа инфы был как и во втором варианте. Так сказать про запас, чтобы был ещё один вариант кода. Или думаете, что в итоге это будет одно и тоже, и ретушировать первый вариант нет смысла?

Если ответите и на этот вопрос - дополнительный тхэнкс! Нет, ну и ладно

P.S.2. И ещё ОГРОМНЫЙ респект за супер оперативное решение!!!!!

@Mr_Sergo · 12.08.2020, 15:36

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

чтобы после нажатию на кнопку на пустой странице отобразился текст

так же как происходит во 2-ом варианте?
если да то смысл писать второй раз тот же самый код? копипаст в помощь

ну или подробней объясните, потому как непонятно куда вы хотите выводить список вопросов

@SeregIN · 12.08.2020, 19:03 **[ТС]**

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

так же как происходит во 2-ом варианте?
если да то смысл писать второй раз тот же самый код? копипаст в помощь
ну или подробней объясните, потому как непонятно куда вы хотите выводить список вопросов

Да, всё правильно, - смысл и вид отображения инфы такой же, как и во 2-ом варианте)
(просто подумал, мало ли, может код как-то по-другому немного оформить...)
Знаний пока, мягко говоря мало, поэтому...

Хорошо, я понял - копипаст наше всё))

Спасибо, что ответили и на этот глупый вопрос!

Всё, данный вопрос считается закрытым.

@Mr_Sergo · 12.08.2020, 19:48

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

Спасибо

не за что, вдруг если понадобится получить доступ к какому то конкретному вопросу из массива, почитайте тут https://developer.mozilla.org/... ects/Array
там ничего сложного и все подробно изложено, а именно пункт Доступ к элементу массива по индексу

@SeregIN · 15.08.2020, 18:56 **[ТС]**

Сорри, что не сразу ответил... Очередной раз - огромное спасибо, за статейку про массив)))
Более-менее понятно, но, самое главное что без лишней писанины))
Статейка пригодится 100%

@alexsamos33 · 16.08.2020, 03:46

Есть ещё вариант. Где первый код замени alert на document.write.
Тогда всё содержимое перезапишется полностью.
Просто знай про такую функцию.
До загрузки она пишет сразу, по ходу страницы,
а уже после загрузки затерает полностью предыдущее содержимое.

@SeregIN · 16.08.2020, 12:12 **[ТС]**

alexsamos33, огромнейшее и Вам СПАСИБО!!! Работает!

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

Как отобразить/передать текстовую информацию из .js в .html ?

Решение

Решение

Решение

@SeregIN 0 / 0 / 0 Регистрация: 11.08.2020 Сообщений: 5
	12.08.2020, 14:44 [ТС]
	Mr_Sergo, ОГРОМНОЕ Вам спасибо !!!!! Вы всё правильно поняли! Второй вариант, который Вы предложили - это именно то, что мне нужно! P.S.1. Насчёт первого моего и Вашего варианта... Может Вы не заметили, но я под ним уточнил, что хоть он и рабочий, но мне нужно БЕЗ alert (без всяких всплывающих окон). Т.е. как-то подретушировать код, чтобы смыл показа инфы был как и во втором варианте. Так сказать про запас, чтобы был ещё один вариант кода. Или думаете, что в итоге это будет одно и тоже, и ретушировать первый вариант нет смысла? Если ответите и на этот вопрос - дополнительный тхэнкс! Нет, ну и ладно P.S.2. И ещё ОГРОМНЫЙ респект за супер оперативное решение!!!!! 0

@SeregIN 0 / 0 / 0 Регистрация: 11.08.2020 Сообщений: 5
	15.08.2020, 18:56 [ТС]
	Сорри, что не сразу ответил... Очередной раз - огромное спасибо, за статейку про массив))) Более-менее понятно, но, самое главное что без лишней писанины)) Статейка пригодится 100% 0

@alexsamos33 669 / 640 / 335 Регистрация: 26.04.2014 Сообщений: 2,122
	16.08.2020, 03:46
	Сообщение было отмечено gogolik как решение Решение Есть ещё вариант. Где первый код замени alert на document.write. Тогда всё содержимое перезапишется полностью. Просто знай про такую функцию. До загрузки она пишет сразу, по ходу страницы, а уже после загрузки затерает полностью предыдущее содержимое. 1

@SeregIN 0 / 0 / 0 Регистрация: 11.08.2020 Сообщений: 5
	16.08.2020, 12:12 [ТС]
	alexsamos33, огромнейшее и Вам СПАСИБО!!! Работает! 0

Как отобразить/передать текстовую информацию из *.js в *.html ?

Решение

Решение

Решение

Как отобразить/передать текстовую информацию из .js в .html ?