Есть select и при нажатии на кнопку загружается определенный html файл. Как можно упростить код?

@defender24_1 · Регистрация: 02.09.2018

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

Есть select и при нажатии на кнопку загружается определенный html файл.
Как можно упростить код,чтобы не писать условия под каждую загрузку новостей?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
    <div id="selectHere">
        <select id="selectNews">
            <option value="news1">Статья 1</option>
            <option value="news2">Статья 2</option>
            <option value="news3">Статья 3</option>
            <option value="news4">Статья 4</option>
        </select>
        <button id="buttonNews">жмЯк!</button>
    </div>  
    <div id="divNews">
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

JavaScript
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
var button = document.getElementById("buttonNews");
button.addEventListener("click", function(){
    var valueNew = document.getElementById("selectNews").value;
    var divNews = document.getElementById("divNews");
    var $newsDiv = $('<div></div>');
    if(valueNew == "news1"){
        $.ajax('news1.html', {
    success: function(result){
        $('#divNews').append($newsDiv.html(result));
    },
    error: function(error){
        $('divNews').text(error.responseText);
    }
});
    }else if(valueNew == "news2"){
        $.ajax('news2.html', {
    success: function(result){
        $('#divNews').append($newsDiv.html(result));
    },
    error: function(error){
        $('divNews').text(error.responseText);
    }
});
    }else if(valueNew == "news3"){
        $.ajax('news3.html', {
    success: function(result){
        $('#divNews').append($newsDiv.html(result));
    },
    error: function(error){
        $('divNews').text(error.responseText);
    }
});
    }else{
        $.ajax('news4.html', {
    success: function(result){
        $('#divNews').append($newsDiv.html(result));
    },
    error: function(error){
        $('divNews').text(error.responseText);
    }
});
    }
 
})

@Evgen1337 · 02.11.2018, 13:00

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  var button = document.getElementById("buttonNews");
  button.addEventListener("click", function () {
    var valueNew = document.getElementById("selectNews").value;
    var divNews = document.getElementById("divNews");
    var $newsDiv = $('<div></div>');
    $.ajax(valueNew + '.html', {
      success: function (result) {
        $('#divNews').append($newsDiv.html(result));
      },
      error: function (error) {
        $('divNews').text(error.responseText);
      }
    })
  })

@defender24_1 · 02.11.2018, 13:35 **[ТС]**

Evgen1337,
GET http://127.0.0.1:8887/news1.html 404 (Not Found)
Не находит файл по запросу.

@Evgen1337 · 02.11.2018, 13:42

а файлы (news1.html,...) есть на сервере?
и если есть, то как ты их открываешь обычно...

@defender24_1 · 02.11.2018, 14:34 **[ТС]**

Evgen1337,
Смотрите. Я использую Web server for Chrome(200 ok). В проекте лежат 4 файла html(news1....). Если использовать мой код,то при нажатии кнопки содержимое файлов загружается на страницу ,в зависимости какой news выбираешь.

Добавлено через 18 минут
Парсятся все html в <div id="divNews">
</div>

@Evgen1337 · 02.11.2018, 14:40

index.html

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
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <title>title</title>
</head>
 
<body>
  <div id="selectHere">
    <select id="selectNews">
      <option value="news1">Статья 1</option>
      <option value="news2">Статья 2</option>
      <option value="news3">Статья 3</option>
      <option value="news4">Статья 4</option>
    </select>
    <button id="buttonNews">жмЯк!</button>
  </div>
  <div id="divNews">
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
  <script>
    var button = document.getElementById("buttonNews");
    button.addEventListener("click", function () {
      var valueNew = document.getElementById("selectNews").value;
      var divNews = document.getElementById("divNews");
      var $newsDiv = $('<div></div>');
      $.ajax(valueNew + '.html', {
        success: function (result) {
          $('#divNews').append($newsDiv.html(result));
        },
        error: function (error) {
          $('divNews').text(error.responseText);
        }
      })
    })
  </script>
</body>
 
</html>

news1.html

PHP/HTML
1
2
3
<div>
  news1.html
</div>

запускаю через пэхапэ из папки где лежат эти два файла

php -S localhost:2997 -t .

и вот результат:
Название: Screen Shot 2018-11-02 at 14.38.38.png
Просмотров: 15

Размер: 15.0 Кб

Название: Screen Shot 2018-11-02 at 14.38.38.png
Просмотров: 15

Размер: 15.0 Кб

@defender24_1 · 02.11.2018, 15:00 **[ТС]**

Смысл в том что в этот div должны парсится html файлы (в каждом какая то статья).Он создается лишь для загрузки содержимого ,вся информация хранится в отдельных html (news1.html,news2.html,news3.html,news4. html). Этот див как переменная используется.

@Evgen1337 · 02.11.2018, 15:33

я не понимаю, о чем разговор )
news1.html

PHP/HTML
1
2
3
<div style="color: red" class="someclassnamerighthere">
  news1.html
</div>

Есть select и при нажатии на кнопку загружается определенный html файл. Как можно упростить код?

@defender24_1 · 02.11.2018, 15:48 **[ТС]**

так должно содержимое из news.html загружаться, а не название в dive)

news.html это файлы в проэкте с информацией

HTML5
1
2
3
4
5
6
7
<h2>Article 1</h2>
<img src="https://resources.stuff.co.nz/content/dam/images/1/f/u/l/l/7/image.related.StuffLandscapeSixteenByNine.620x349.1fulll.png/1480644176994.jpg" alt="image">
<p>Over the past few years, the Dunedin street art scene has exploded.
 
Gone are the days of grungy punk tags and ugly incomprehensible letters on back alley corners. Instead, there's a growing interest in grassroots art that truly shows off the quirky side of this South Island city. Dunedin is redefining urban culture in New Zealand one beautifully decorated wall at a time.
 
The artists flocking to the city aren't just your average taggers, they are famous artists travelling the world on assignments to bring life back into cities.</p>

вот пример news1.html

@maxoun · 02.11.2018, 16:36

Evgen1337, Как можно загрузить html документ с его скриптами на страницу с помощью ajax?
Только так чтобы менялась именно центральная часть все остальное на месте

@Evgen1337 · 02.11.2018, 17:14

PHP/HTML
1
2
3
4
5
6
<div style="color: red" class="someclassnamerighthere">
  news1.html
</div>
<script>
  alert('script from news1.html')
</script>

@defender24_1 · 05.11.2018, 09:31 **[ТС]**

Ни у кого нет никаких идей? Чтобы это полотно с условиями убрать((

@EveKS · 05.11.2018, 16:22

defender24_1, switch

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&d=1772460536 Одним из. . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .
SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .

@defender24_1 17 / 0 / 0 Регистрация: 02.09.2018 Сообщений: 58
	02.11.2018, 13:35 [ТС]
	Evgen1337, GET http://127.0.0.1:8887/news1.html 404 (Not Found) Не находит файл по запросу. 0

@Evgen1337 249 / 162 / 68 Регистрация: 10.12.2017 Сообщений: 558
	02.11.2018, 13:42
	а файлы (news1.html,...) есть на сервере? и если есть, то как ты их открываешь обычно... 0

@defender24_1 17 / 0 / 0 Регистрация: 02.09.2018 Сообщений: 58
	02.11.2018, 14:34 [ТС]
	Evgen1337, Смотрите. Я использую Web server for Chrome(200 ok). В проекте лежат 4 файла html(news1....). Если использовать мой код,то при нажатии кнопки содержимое файлов загружается на страницу ,в зависимости какой news выбираешь. Добавлено через 18 минут Парсятся все html в <div id="divNews"> </div> 0

@defender24_1 17 / 0 / 0 Регистрация: 02.09.2018 Сообщений: 58
	02.11.2018, 15:00 [ТС]
	Смысл в том что в этот div должны парсится html файлы (в каждом какая то статья).Он создается лишь для загрузки содержимого ,вся информация хранится в отдельных html (news1.html,news2.html,news3.html,news4. html). Этот див как переменная используется. 0

@maxoun 21 / 44 / 11 Регистрация: 08.02.2018 Сообщений: 443
	02.11.2018, 16:36
	Evgen1337, Как можно загрузить html документ с его скриптами на страницу с помощью ajax? Только так чтобы менялась именно центральная часть все остальное на месте 0

@defender24_1 17 / 0 / 0 Регистрация: 02.09.2018 Сообщений: 58
	05.11.2018, 09:31 [ТС]
	Ни у кого нет никаких идей? Чтобы это полотно с условиями убрать(( 0

@EveKS 601 / 485 / 185 Регистрация: 19.04.2016 Сообщений: 1,885
	05.11.2018, 16:22
	defender24_1, switch 0