Запускать скрипт только в том случае, если скрытый div (display: none) активен

Question

Мне нужно запускать скрипт только тогда, когда скрытый div (display: none) активен.

Когда вы нажимаете «радио кнопку», отображается «div1» с помощью фальшивого загрузчика, а через 3 секунды отображается еще один div с именем «my_div».

Но если пользователь не нажимает кнопку «радио», случайный текст на «my_div» все еще появляется.

Мне нужно это исправить, показывать этот случайный текст «my_div» только в том случае, если пользователь нажимает переключатель. Таким образом, когда пользователь нажимает «переключатель», отображает «div1» с помощью фальшивого загрузчика и через 3 секунды отображает другой div (уже работает), если не нажать кнопку, ничего не происходит (не запускайте случайный скрипт).

Рабочая: https://jsfiddle.net/zto6gv1c/3/

Это мой проект:

function show1() {
  document.getElementById('div1').style.display = 'none';
}

function show2() {
  document.getElementById('div1').style.display = 'block';
}

var r_text = new Array();
r_text[0] = "Disponível";
r_text[1] = "Indisponível";
r_text[2] = "Disponível";
r_text[3] = "Indisponível";
r_text[4] = "Disponível";
r_text[5] = "Disponível";
r_text[6] = "Indisponível";
r_text[7] = "Disponível";
r_text[8] = "Indisponível";
r_text[9] = "Disponível";
r_text[10] = "Indisponível";
r_text[11] = "Disponível";
var i = Math.floor(7 * Math.random())

document.write(r_text[i]);

window.onload = function() //executes when the page finishes loading
{
  setTimeout(func1, 3000); //sets a timer which calls function func1 after 2,000 milliseconds = 2 secs.

};

function func1() {
  document.getElementById("my_div").className = "show";
}

.hide {
  display: none;
}

p {
  font-weight: bold;
}

.show {
  display: block;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Deseja chegar a disponibilidade do produto?</p>

<input type="radio" name="tab" value="igottwo" onclick="show2();" /> Sim

<div id="div1" class="hide">CHECANDO</div>

<div id="my_div" class="hide"></div>

Answer 1

Надеюсь, это то, что вы ищете.Дайте мне знать, если я рядом.

function show2() {
    document.getElementById('div1').style.display = 'block';
    setTimeout(func1, 3000); 
}

Затем замените document.write ниже

document.getElementById("my_div").innerHTML = r_text[i];

Затем замените ваш код window.onload на ниже

window.onload = function() //executes when the page finishes loading
{
    setTimeout(function(){
        if(document.getElementById('div1').style.display != 'block'){
            func1();
        }
    }, 3000); //sets a timer which calls function func1 after 2,000 milliseconds = 2 secs.
};

Answer 2

Да, так КОГДА class hide не отображает ни одного - вы хотите запустить какой-нибудь другой код?

Вы можете проверить видимость следующим образом:

var isVisible = document.getElementsByClassName("hide")[0].style.display == "block";
if(isVisisble){
   this thing is hiden
}else{
   this thing is not hiden
}

Мыиспользуйте getElementsByClassName, потому что вы помещаете его в класс с именем 'hide' - присутствует только один из этих элементов, поэтому мы используем [0], чтобы получить первый (единственный), затем мы используем style.display, чтобы проверитьзначение.