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

Я использую фреймворк Flask для создания системы поиска информации.

Я пытаюсь вызвать всплывающее окно div, когда я нажимаю на имя. Прямо сейчас я просматриваю список имен и выводю их рядом друг с другом в виде кнопок. Но когда я нажимаю кнопку, я хочу, чтобы с этой кнопки открывался div. Однако каждый раз, когда я нажимаю на кнопку, страница обновляется и удаляются все выведенные мной имена. Сейчас функция myDiv даже не вызывается. Как я могу заставить div отображаться под кнопкой, которую я нажимаю, не удаляя все остальные выходные данные?

// actions.js
function myDiv(name) {
    var x = document.getElementById(tag);
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

<form class = "form-inline" action = "">
  {% if output %}
  <h2>Top names to use</h2>
    {% for name in output %}
    <div class = "output-container">
      <button onclick = "myDiv({{name}})" id = {{name}} class = "btn btn-info">{{name}}</button>
     </div>
    {% endfor %}
  {% endif %}
</form>
<script type = "text/javascript" src = "/static/js/actions.js"></script>

javascript jquery html css flask

23.04.2018 06:07

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

По умолчанию тип button - submit. Вы должны неявно изменить это на button:

<button type = "button" onclick = "myDiv({{name}})" id = {{name}} class = "btn btn-info">{{name}}</button>

23.04.2018 06:09

тип кнопки вашей кнопки необходимо установить кнопку

// action.js
function myDiv(name) {
    var x = document.getElementById(tag);
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

<form class = "form-inline" action = "">
  {% if output %}
  <h2>Top names to use</h2>
    {% for name in output %}
    <div class = "output-container">
      <button type = "button" onclick = "myDiv({{name}})" id = {{name}} class = "btn btn-info">{{name}}</button>
     </div>
    {% endfor %}
  {% endif %}
</form>
<script type = "text/javascript" src = "/static/js/actions.js"></script>

23.04.2018 06:11

Используйте JQuery bro. Если вы хотите узнать больше о JQuery здесь - https://jquery.com/

И решение через JQuery довольно простое.

$("#your_button_id").click(function(){

   $("#your_div_id").hide(); 
   $("#your_div_id").show();  

   /*Whatever you want to do you can do here.*/
})

Надеюсь, это было полезно.

23.04.2018 06:17

Другие вопросы по теме

Помощь в тесте на жасмин требуется после каждого

JQuery - итерация коллекции значений

Анимировать липкое меню JQUERY

Сбросить сохраненные значения параметров jQuery

Добавьте класс, который находится над ним, например, добавьте класс "act" в "<ul>" над "li.item1"

При вводе фокуса измените размер шрифта метки

Есть ли такой раздел неудач, как успех?

TypeError: невозможно прочитать свойство TigerNo неопределенного tempObj ['TigerNo'] = this.getDefault (sportsRecord) .TigerNo

JQuery переключает между несвязанными div при нажатии

Внедрение html dom внутри документа iframe и / или теневого корня

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

Ответы 3

Другие вопросы по теме

Похожие вопросы