JavaScript работает и не работает одновременно

ProgramBox

JavaScript работает и не работает одновременно

Post author:admin
Запись опубликована:9 января, 2022
Post category:Вопросы по программированию

#javascript #html #css

Вопрос:

У меня есть следующая задача, мне нужно создать таблицу 2×2, и на каждой плитке этой таблицы есть кнопка, которая должна открыть скрытый div, содержащий iframe. Если открыт iframe, столбцы сетки-шаблона и строки сетки-шаблона изменяются. От 30 Вт 30 Вт для столбцов и 20 вн 20 вн для строк до 95 Вт для столбцов и, возможно, для строк. Вариационно — если, например, я открыл первый кадр, но в то же время у меня уже был открыт третий, то мои строки сетки-шаблона будут 110vh 20vh 110vh 20vh, а если я открою только первый, то 110vh 20vh 20vh 20vh соответственно. До того, как я попытался сделать переменную высоту строк, у меня все работало, ширина и высота первого контейнера уменьшались и увеличивались, появлялся iframe, но как только я написал код для изменчивости, все сразу сломалось: iframe не появляется, ширина увеличивается, но не уменьшается, высота увеличивается только для 1 элемента …

Логика моего js такова: проверяем, скрыт ли тот элемент, за который отвечает кнопка, вызвавшая метод, если да, то смотрим, какие ифрамы уже были показаны, и в зависимости от этого задаем высоту строки и задаем display: block; . Если этот элемент отображается, то мы делаем то же самое, но устанавливаем отображение: нет;

Вот фрагмент html-кода:

 <div id="projects-grid">
        <div class="project-tile">
            <a href="">
                <button class="a-btn">
                    <h2>Go to Tribute page</h2>
                </button>
            </a>
            <button class="show-btn" onclick="firstBtnClick()">
                <p id="first-show-p">Click to open site</p>
            </button>
            <div id="first-hidden">
                <img src="https://i.postimg.cc/V6Dh8R60/Tribute-Page-Preview.png" alt="">
                <!-- <iframe src="https://codepen.io/YouAreMe12/full/bGRdxZg" frameborder="0"></iframe> -->
            </div>
        </div>
        <div class="project-tile">
            <a href="">
                <button class="a-btn">
                    <h2>Survey form</h2>
                </button>
            </a>
            <button class="show-btn" onclick="secondBtnClick()">
                <p class="show-para">Click to open site</p>
            </button>
            <div id="second-hidden">
                <img src="https://i.postimg.cc/V6Dh8R60/Tribute-Page-Preview.png" alt="">
            </div>
        </div>
        <div class="project-tile">
            <a href="">
                <button class="a-btn">
                    <h2>Product landing page</h2>
                </button>
            </a>
            <button class="show-btn" onclick="thirdBtnClick()">
                <p class="show-para">Click to open site</p>
            </button>
            <div id="third-hidden">
                <img src="https://i.postimg.cc/V6Dh8R60/Tribute-Page-Preview.png" alt="">
            </div>
        </div>
        <div class="project-tile">
            <a href="">
                <button class="a-btn">
                    <h2>Technical documentation page</h2>
                </button>
            </a>
            <button class="show-btn" onclick="forthBtnClick()">
                <p class="show-para">Click to open site</p>
            </button>
            <div id="forth-hidden">
                <img src="https://i.postimg.cc/V6Dh8R60/Tribute-Page-Preview.png" alt="">
            </div>
        </div>
    </div>

CSS:

  #projects-grid {
  display: grid;
  grid-template-columns: 30vw 30vw;
  grid-template-rows: 20vh 20vh;
  grid-gap: 9rem;
  margin: 0 auto;
  margin-bottom: 6rem;
}
.project-tile {
  background: var(--main-gray);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  margin: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  border: 1px solid cyan;
}
#first-hidden {
  pad: var(--main-cyan);
  display: none;
}
#second-hidden {
  display: none;
}
#third-hidden {
  display: none;
}
#forth-hidden {
  display: none;
}
iframe {
  border-radius: 5px;
  width: 87vw;
  height: 89vh;
  border-bottom: 7px solid var(--main-white);
}

and JS with responsive height:

     function firstBtnClick() {
    //start
    if (document.getElementById("first-hidden").style.display == "none") {
        //second is shown
        if (document.getElementById("second-hidden").style.display != "none") {
            //second and third
            if (document.getElementById("third-hidden").style.display != "none") {
                //and also forth
                if (document.getElementById("forth-hidden").style.display != "none") {
                    document.getElementById("projects-grid").style.gridTemplateRows = "110vh 110vh 110vh 110vh";
                }
                document.getElementById("projects-grid").style.gridTemplateRows = "110vh 110vh 110vh 20vh";
                //second and forth
            } else if (document.getElementById("forth-hidden").style.display != "none") {
                document.getElementById("projects-grid").style.gridTemplateRows = "110vh 110vh 20vh 110vh";
            }
            document.getElementById("projects-grid").style.gridTemplateRows = "110vh 110vh 20vh 20vh";
            //second is hidden third is shown
        } else if (document.getElementById("third-hidden").style.display != "none") {
            //third and forth
            if (!document.getElementById("forth-hidden").style.display != "none") {
                document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 110vh 110vh";
            }
            document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 110vh 20vh";
            //only forth
        } else if (document.getElementById("forth-hidden").style.display != "none") {
            document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 20vh 110vh";
        }
        document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 20vh 20vh";
        document.getElementById("first-show-p").textContent = "Click to hide site";
        document.getElementById("first-hidden").style.display = "block";
    } else {
        //column check
        if (document.getElementById("second-hidden").style.display != "none" ||
            document.getElementById("third-hidden").style.display != "none" ||
            document.getElementById("forth-hidden").style.display != "none") {
            document.getElementById("projects-grid").style.gridTemplateColumns = "95vw";
        }else{
            document.getElementById("projects-grid").style.gridTemplateColumns = "30vw 30vw";
        }
        //second
        if (document.getElementById("second-hidden").style.display != "none") {
            //second and third
            if (document.getElementById("third-hidden").style.display != "none") {
                //also forth
                if (document.getElementById("forth-hidden").style.display != "none") {
                    document.getElementById("projects-grid").style.gridTemplateRows = "20vh 110vh 110vh 110vh";
                }
                document.getElementById("projects-grid").style.gridTemplateRows = "20vh 110vh 110vh 20vh";
                //second and forth
            } else if (document.getElementById("forth-hidden").style.display != "none") {
                document.getElementById("projects-grid").style.gridTemplateRows = "20vh 110vh 20vh 110vh";
            }
            //only second
            document.getElementById("projects-grid").style.gridTemplateRows = "20vh 110vh 20vh 20vh";
            //third
        } else if (document.getElementById("third-hidden").style.display != "none") {
            //third and forth
            if (document.getElementById("forth-hidden").style.display != "none") {
                document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh 110vh 110vh";
            }
            //only third
            document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh 110vh 20vh";
            //forth
        } else if (document.getElementById("forth-hidden").style.display != "none") {
            document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh 20vh 110vh";
        }
        document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh";
        document.getElementById("first-show-p").textContent = "Click to open site";
        document.getElementById("second-hidden").style.display = "none";
    }
}
function secondBtnClick() {
    //start
    if (document.getElementById("second-hidden").style.display == "none") {
        //first is shown
        if (document.getElementById("first-hidden").style.display != "none") {
            //first and third
            if (document.getElementById("third-hidden").style.display != "none") {
                //and also forth
                if (document.getElementById("forth-hidden").style.display != "none") {
                    document.getElementById("projects-grid").style.gridTemplateRows = "110vh 110vh 110vh 110vh";
                }
                document.getElementById("projects-grid").style.gridTemplateRows = "110vh 110vh 110vh 20vh";
                //first and forth
            } else if (document.getElementById("forth-hidden").style.display != "none") {
                document.getElementById("projects-grid").style.gridTemplateRows = "110vh 110vh 20vh 110vh";
            }
            document.getElementById("projects-grid").style.gridTemplateRows = "110vh 110vh 20vh 20vh";
            //first is hidden third is shown
        } else if (document.getElementById("third-hidden").style.display != "none") {
            //third and forth
            if (!document.getElementById("forth-hidden").style.display != "none") {
                document.getElementById("projects-grid").style.gridTemplateRows = "20vh 110vh 110vh 110vh";
            }
            document.getElementById("projects-grid").style.gridTemplateRows = "20vh 110vh 110vh 20vh";
            //only forth
        } else if (document.getElementById("forth-hidden").style.display != "none") {
            document.getElementById("projects-grid").style.gridTemplateRows = "20vh 110vh 20vh 110vh";
        }
        document.getElementById("projects-grid").style.gridTemplateRows = "20vh 110vh 20vh 20vh";
        document.getElementById("second-show-p").textContent = "Click to hide site";
        document.getElementById("second-hidden").style.display = "block";
    } else {
        //column check
        if (document.getElementById("first-hidden").style.display != "none" ||
            document.getElementById("third-hidden").style.display != "none" ||
            document.getElementById("forth-hidden").style.display != "none") {
            document.getElementById("projects-grid").style.gridTemplateColumns = "95vw";
        }else{
            document.getElementById("projects-grid").style.gridTemplateColumns = "30vw 30vw";
        }
        //first
        if (document.getElementById("first-hidden").style.display != "none") {
            //first and third
            if (document.getElementById("third-hidden").style.display != "none") {
                //also forth
                if (document.getElementById("forth-hidden").style.display != "none") {
                    document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 110vh 110vh";
                }
                document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 110vh 20vh";
                //first and forth
            } else if (document.getElementById("forth-hidden").style.display != "none") {
                document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 20vh 110vh";
            }
            //only first
            document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 20vh 20vh";
            //third
        } else if (document.getElementById("third-hidden").style.display != "none") {
            //third and forth
            if (document.getElementById("forth-hidden").style.display != "none") {
                document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh 110vh 110vh";
            }
            //only third
            document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh 110vh 20vh";
            //forth
        } else if (document.getElementById("forth-hidden").style.display != "none") {
            document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh 20vh 110vh";
        }
        document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh";
        document.getElementById("second-show-p").textContent = "Click to open site";
        document.getElementById("second-hidden").style.display = "none";
    }
}
function thirdBtnClick() {
    //start
    if (document.getElementById("third-hidden").style.display == "none") {
        //first is shown
        if (document.getElementById("first-hidden").style.display != "none") {
            //first and second
            if (document.getElementById("second-hidden").style.display != "none") {
                //and also forth
                if (document.getElementById("forth-hidden").style.display != "none") {
                    document.getElementById("projects-grid").style.gridTemplateRows = "110vh 110vh 110vh 110vh";
                }
                document.getElementById("projects-grid").style.gridTemplateRows = "110vh 110vh 110vh 20vh";
                //first and forth
            } else if (document.getElementById("forth-hidden").style.display != "none") {
                document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 110vh 110vh";
            }
            document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 110vh 20vh";
            //first is hidden second is shown
        } else if (document.getElementById("second-hidden").style.display != "none") {
            //second and forth
            if (!document.getElementById("forth-hidden").style.display != "none") {
                document.getElementById("projects-grid").style.gridTemplateRows = "20vh 110vh 110vh 110vh";
            }
            document.getElementById("projects-grid").style.gridTemplateRows = "20vh 110vh 110vh 20vh";
            //only forth
        } else if (document.getElementById("forth-hidden").style.display != "none") {
            document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh 110vh 110vh";
        }
        document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh 110vh 20vh";
        document.getElementById("third-show-p").textContent = "Click to hide site";
        document.getElementById("third-hidden").style.display = "block";
    } else {
        //column check
        if (document.getElementById("first-hidden").style.display != "none" ||
            document.getElementById("second-hidden").style.display != "none" ||
            document.getElementById("forth-hidden").style.display != "none") {
            document.getElementById("projects-grid").style.gridTemplateColumns = "95vw";
        }else{
            document.getElementById("projects-grid").style.gridTemplateColumns = "30vw 30vw";
        }
        //first
        if (document.getElementById("first-hidden").style.display != "none") {
            //first and second
            if (document.getElementById("second-hidden").style.display != "none") {
                //also forth
                if (document.getElementById("forth-hidden").style.display != "none") {
                    document.getElementById("projects-grid").style.gridTemplateRows = "110vh 110vh 20vh 110vh";
                }
                document.getElementById("projects-grid").style.gridTemplateRows = "110vh 110vh 20vh 20vh";
                //first and forth
            } else if (document.getElementById("forth-hidden").style.display != "none") {
                document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 20vh 110vh";
            }
            //only first
            document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 20vh 20vh";
            //second
        } else if (document.getElementById("second-hidden").style.display != "none") {
            //second and forth
            if (document.getElementById("forth-hidden").style.display != "none") {
                document.getElementById("projects-grid").style.gridTemplateRows = "20vh 110vh 20vh 110vh";
            }
            //only second
            document.getElementById("projects-grid").style.gridTemplateRows = "20vh 110vh 20vh 20vh";
            //forth
        } else if (document.getElementById("forth-hidden").style.display != "none") {
            document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh 20vh 110vh";
        }
        document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh";
        document.getElementById("third-show-p").textContent = "Click to open site";
        document.getElementById("third-hidden").style.display = "none";
    }
}
function forthBtnClick() {
    //start
    if (document.getElementById("forth-hidden").style.display == "none") {
        //first is shown
        if (document.getElementById("first-hidden").style.display != "none") {
            //first and second
            if (document.getElementById("second-hidden").style.display != "none") {
                //and also third
                if (document.getElementById("third-hidden").style.display != "none") {
                    document.getElementById("projects-grid").style.gridTemplateRows = "110vh 110vh 110vh 110vh";
                }
                document.getElementById("projects-grid").style.gridTemplateRows = "110vh 110vh 20vh 110vh";
                //first and third
            } else if (document.getElementById("third-hidden").style.display != "none") {
                document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 110vh 110vh";
            }
            document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 20vh 110vh";
            //first is hidden second is shown
        } else if (document.getElementById("second-hidden").style.display != "none") {
            //second and third
            if (!document.getElementById("third-hidden").style.display != "none") {
                document.getElementById("projects-grid").style.gridTemplateRows = "20vh 110vh 110vh 110vh";
            }
            document.getElementById("projects-grid").style.gridTemplateRows = "20vh 110vh 20vh 110vh";
            //only third
        } else if (document.getElementById("third-hidden").style.display != "none") {
            document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh 110vh 110vh";
        }
        document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh 20vh 110vh";
        document.getElementById("forth-show-p").textContent = "Click to hide site";
        document.getElementById("forth-hidden").style.display = "block";
    } else {
        //column check
        if (document.getElementById("first-hidden").style.display != "none" ||
            document.getElementById("second-hidden").style.display != "none" ||
            document.getElementById("third-hidden").style.display != "none") {
            document.getElementById("projects-grid").style.gridTemplateColumns = "95vw";
        }else{
            document.getElementById("projects-grid").style.gridTemplateColumns = "30vw 30vw";
        }
        //first
        if (document.getElementById("first-hidden").style.display != "none") {
            //first and second
            if (document.getElementById("second-hidden").style.display != "none") {
                //also third
                if (document.getElementById("third-hidden").style.display != "none") {
                    document.getElementById("projects-grid").style.gridTemplateRows = "110vh 110vh 110vh 20vh";
                }
                document.getElementById("projects-grid").style.gridTemplateRows = "110vh 110vh 20vh 20vh";
                //first and third
            } else if (document.getElementById("third-hidden").style.display != "none") {
                document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 110vh 20vh";
            }
            //only first
            document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 20vh 20vh";
            //second
        } else if (document.getElementById("second-hidden").style.display != "none") {
            //second and third
            if (document.getElementById("third-hidden").style.display != "none") {
                document.getElementById("projects-grid").style.gridTemplateRows = "20vh 110vh 110vh 20vh";
            }
            //only second
            document.getElementById("projects-grid").style.gridTemplateRows = "20vh 110vh 20vh 20vh";
            //third
        } else if (document.getElementById("third-hidden").style.display != "none") {
            document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh 110vh 20vh";
        }
        document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh";
        document.getElementById("forth-show-p").textContent = "Click to open site";
        document.getElementById("forth-hidden").style.display = "none";
    }
}

And without:

 function btnClick(){
if (document.getElementById("first-hidden").style.display == "none") {
    document.getElementById("projects-grid").style.gridTemplateColumns = "95vw";
    document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 20vh 20vh";
    document.getElementById("first-hidden").style.display = "block";
}else {
    document.getElementById("projects-grid").style.gridTemplateColumns = "30vw 30vw";
    document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh";
    document.getElementById("first-hidden").style.display = "none";
}

Метки: JavaScript работает и не работает одновременно

Вопрос:

Вам также может понравиться

поиск минимального и максимального элемента в массиве (C )

NSURLSessionDownloadTask cancelByProducingResumeData возвращает нуль

Веб-пакет неожиданного экспорта токенов