JavaScript(обновление скрипта без перезагрузки страницы) - JavaScript, Ajax

Bagaganak · 03.08.2017, 12:23

Есть код:

Код HTML:

<script>
var cont=["1","2","3"]
var rand=Math.floor(Math.random()* cont.length);
document.write(var[rand]);
<script>

Подскажите как можно сделать обновление такого скрипта по кнопке без перезагрузки страницы?

Пробовал :

Код HTML:

<input id="elem" value="Нажми меня" type="button">
<script>
elem.onclick = function() {
var cont=["1","2","3"]
var rand=Math.floor(Math.random()* cont.length);
document.write(var[rand]);
};
<script>

Но почему-то при нажатии отправляет на другую страницу с выведенным текстом.

Alex11223 · 03.08.2017, 12:29

обновление откуда?

Bagaganak · 03.08.2017, 12:45

Ну скрипт сработал, вывел число, нужно с помощью кнопки перезапустить скрипт что бы он вывел другое число, не перезагружая страницу

Alex11223 · 03.08.2017, 13:04

Цитата:

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

почему-то

https://learn.javascript.ru/devtools
https://learn.javascript.ru/debugging-chrome

и document.write тут всю страницу перезапишет, говорили ж уже.

Bagaganak · 03.08.2017, 13:30

Цитата:

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

и document.write тут всю страницу перезапишет, говорили ж уже.

С document.append() все то же самое

pompiduskus · 03.08.2017, 14:11

Много разных вариатов, смотря что нужно

Код:

var element = getElementByID('my-elem');

// Добавить содержимое к элементу не нарушая все события и все важно и настроено
element.insertAdjacentHTML( "beforeend", '<button></button>' );

// Перезаписать содержимое элемениа
element.innertHTML = '<button></button>';

// Добавить содержимое к элементу
element.innertHTML += '<button></button>';

Bagaganak · 03.08.2017, 14:53

Нужно что бы код по кнопке перезапускал этот код так,что бы менялся текст и картинка, но страница не должна перезагружаться

Код HTML:

<script>
var cont = ['<p class="text">  text 1</p>  <img src="1.jpg">','<p class="text">  text2.</p>  <img src="2.jpg">','<p class="text">  text 3  </p>  <img src="3.jpg" >'];
var r = Math.floor(Math.random()* cont.length);
document.write(cont[r]);
</script>

pompiduskus · 03.08.2017, 15:44

А выше что написано, религия не позволяет прочитать ?

Bagaganak · 03.08.2017, 16:04

Можете подсказать как это использовать в моем случае?

pompiduskus · 04.08.2017, 01:17

Код:

<!DOCTYPE html>
<html lang="en-US">
<head>

    <title>Page-Title</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <style type="text/css">

    #wrapper{ 
        width: 400px; height: 400px; margin: 25px auto; border: solid 1px #000;
        text-align: center; padding-top: 10px; font-size: 20px;
    }

    button{ width: 300px; margin: 20px auto; padding: 10px; font-size: 14px; }

    </style>

    <script type="text/javascript">

    function main_func(name){
        document.getElementById('main').innerHTML = 'button: [<b>'+name+'</b>] OK'

    }


    function A(){
        main_func('A');
        document.getElementById('wrapper').style.background = '#fff';
    }

    function B(){
        main_func('B');
        document.getElementById('wrapper').style.background = '#F00';
    }

    function C(){
        main_func('C');
        document.getElementById('wrapper').style.background = '#0F0';
    }

    function D(){
        main_func('D');
        document.getElementById('wrapper').style.background = '#00F';
    }


    </script>

</head>
<body>
<!-- ========================================================== -->
<div id="wrapper">
    
    <div id="main">
        test
    </div>
    
    <button onclick="A()">function A</button>
    <button onclick="B()">function B</button>        
    <button onclick="C()">function C</button>
    <button onclick="D()">function D</button>

</div>

<!-- ========================================================== -->
</body>
</html>

03.08.2017, 12:23	#1
Bagaganak Пользователь Регистрация: 28.07.2017 Сообщений: 15	JavaScript(обновление скрипта без перезагрузки страницы) Есть код: Код HTML: <script> var cont=["1","2","3"] var rand=Math.floor(Math.random()* cont.length); document.write(var[rand]); <script> Подскажите как можно сделать обновление такого скрипта по кнопке без перезагрузки страницы? Пробовал : Код HTML: <input id="elem" value="Нажми меня" type="button"> <script> elem.onclick = function() { var cont=["1","2","3"] var rand=Math.floor(Math.random()* cont.length); document.write(var[rand]); }; <script> Но почему-то при нажатии отправляет на другую страницу с выведенным текстом. Последний раз редактировалось Bagaganak; 03.08.2017 в 13:02.

03.08.2017, 12:29	#2
Alex11223 Старожил Регистрация: 12.01.2011 Сообщений: 19,500	обновление откуда? Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223 ЛС отключены Аларом.

03.08.2017, 14:53	#7
Bagaganak Пользователь Регистрация: 28.07.2017 Сообщений: 15	Нужно что бы код по кнопке перезапускал этот код так,что бы менялся текст и картинка, но страница не должна перезагружаться Код HTML: <script> var cont = ['<p class="text"> text 1</p> <img src="1.jpg">','<p class="text"> text2.</p> <img src="2.jpg">','<p class="text"> text 3 </p> <img src="3.jpg" >']; var r = Math.floor(Math.random()* cont.length); document.write(cont[r]); </script>

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Загрузка разных кусков php скрипта без перезагрузки страницы	SergeyZhuk	PHP	7	26.07.2017 18:11
Голосование Без Перезагрузки Страницы	Nick888	HTML и CSS	1	11.01.2015 01:44
Голосование без перезагрузки страницы	Nick888	PHP	2	26.12.2014 09:21
Голосование Без Перезагрузки Страницы	Nick888	WordPress и другие CMS	0	23.12.2014 21:56
Динамическое изменение URL страницы в JavaScript без перезагрузки страницы	ilusha	JavaScript, Ajax	7	25.02.2009 09:59

03.08.2017, 12:45	#3
Bagaganak Пользователь Регистрация: 28.07.2017 Сообщений: 15	Ну скрипт сработал, вывел число, нужно с помощью кнопки перезапустить скрипт что бы он вывел другое число, не перезагружая страницу

03.08.2017, 16:04	#9
Bagaganak Пользователь Регистрация: 28.07.2017 Сообщений: 15	Можете подсказать как это использовать в моем случае?