Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.12.2020, 16:08
Новичок на форуме
Отправить личное сообщение для vsco89 Посмотреть профиль Найти все сообщения от vsco89
 
Регистрация: 04.12.2020
Сообщений: 8

Обновление страницы при нажатии кнопки
Здравствуйте, форумчане!
Столкнулся с следующей проблемой: при нажатии кнопки на странице, она обновляется. Как это не допустить?
JS:
var firstRow = document.getElementById("firstRow");
var secondRow = document.getElementById("secondRow");
var thirdRow = document.getElementById("thirdRow");
var mainInput = document.getElementById("mainInput");
var mainButton = document.getElementById("mainButton");

mainButton.onclick = function () {
  let value = mainInput.value;
  if (document.getElementsByClassName("selected") == 0) {
    thirdRow.innerHTML = value;
  } else {
    document.getElementsByClassName("selected")[0].innerHTML = value;
  }
};

HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Лабораторная #5(2)</title>
    <link rel="stylesheet" href="styles/style.css" />
  </head>

  <body>
    <table class="mainTable">
      <tr>
        <td id="firstRow"></td>
      </tr>
      <tr>
        <td id="secondRow"></td>
      </tr>
      <tr>
        <td id="thirdRow"></td>
      </tr>
    </table>
    <form name="mainForm">
      <input type="text" id="mainInput" />
      <button type="submit" id="mainButton"></button>
    </form>

    <script src="js/script.js"></script>
  </body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 04.12.2020, 16:20
Новичок на форуме
Отправить личное сообщение для vsco89 Посмотреть профиль Найти все сообщения от vsco89
 
Регистрация: 04.12.2020
Сообщений: 8

upd: нашел решение
Нужно убрать <form></form>
Ответить с цитированием
  #3 (permalink)  
Старый 04.12.2020, 16:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от vsco89
Нужно убрать <form></form>
1. изменить тип кнопки
<button type="button" id="mainButton"></button>

2. или отменить действие по умолчанию
mainButton.onclick = function (event) {
    event.preventDefault()
    let value = mainInput.value;
    if (document.getElementsByClassName("selected").length == 0) {
        thirdRow.innerHTML = value;
    } else {
        document.getElementsByClassName("selected")[0].innerHTML = value;
    }
};
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как отловить событие с сайта, при нажатии кнопки на Гарнитуре Nickon Events/DOM/Window 2 16.10.2018 09:51
Смена картинки кнопки при нажатии и обратно при повторном нажатии mff Общие вопросы Javascript 15 03.05.2018 14:12
Вывод информации при нажатии кнопки читать далее vacuumtrade Элементы интерфейса 44 15.07.2015 06:33
Обновление страницы при нажатии в браузере кнопки "Назад" и "Вперед" OLEGatoRUS23 Общие вопросы Javascript 1 22.03.2015 02:51
При нажатии граница кнопки выделяется оранжевым alexan0308 Мобильный JavaScript 3 12.09.2013 19:37