Как настроить кнопку чтобы она возвращала первоначальный вид страницы?

Question

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

Заранее спасибо, вот кусок кода

function showtext() {
  var myDiv = document.getElementById('text');
  var myLink = document.getElementById('link');
  if (myDiv.style.display == 'none') {
    myDiv.style.display = 'block';
    myLink.style.display = 'none';
  } else {
    myDiv.style.display = 'none';
  }
  return false;
}

function myclear() {
  document.getElementById("text").innerHTML = "";
}

function buttonFunction() {
  document.getElementById("buttonAppear").innerHTML = "";
}

<button class="count" href="javascript:;" onclick="showtext()" id="link">Применить</button>
<br>
<div id="text" style="display: none;">Какой-то очень интересный текст</div>
<button type="button" onclick="buttonFunction(); myclear();">Сброс</button>

<p id="text"></p>
<div id="buttonAppear"></div>

Answer 1

У вас идентификатор text используется два раза, идентификаторы должны быть уникальны. Также вы используете в функции showText конструкцию document.getElementById("text"), если объявление переменной myDiv вы вынесете за рамки функции showtext(), то она будет доступна во всем скрипте и тогда можно будет написать myDiv.innerHTML = ""

Если я правильно понял, что вы хотели получить:

var myDiv = document.getElementById('text');
var myLink = document.getElementById('link');

function showtext() {
  if (myDiv.style.display == 'none') {
    myDiv.style.display = 'block';
    myLink.style.display = 'none';
  } else {
    myDiv.style.display = 'none';
    myLink.style.display = 'block';
  }
  return false;
}

function myclear() {
  myDiv.style.display = 'none';
  myLink.style.display = 'block';
}

function buttonFunction() {
  myLink.style.display = 'none';
  myDiv.style.display = 'block';
};

<button class="count" href="javascript:;" onclick="showtext()" id="link">Применить</button>
<br>
<div id="text" style="display: none;">Какой-то очень интересный текст</div>
<button type="button" onclick="buttonFunction(); myclear();">Сброс</button>

Но если использовать css, можно сделать скрипт лаконичнее

var myDiv = document.getElementById('text');
var myLink = document.getElementById('link');

function showtext() {
  myDiv.classList.remove('hide')
}
function myclear() {
  myDiv.classList.add('hide')
}

.hide{
  display:none;
}

<button class="count btn" href="javascript:;" onclick="showtext()" id="link">Применить</button>
<br>
<div id="text" class="hide">Какой-то очень интересный текст</div>
<button type="button" class="btn" onclick="myclear();">Сброс</button>

БЛОГ НА HUSL

Как настроить кнопку чтобы она возвращала первоначальный вид страницы?

Ответы (1 шт):