Как вызвать функцию внутри главной функции?
Вложений: 1
функция для плавной прокрутки по якорям
function anchorsPage(root) {
const anchors = document.querySelectorAll('a[href*="#"]');
for (let anchors of anchors) {
anchors.addEventListener('click', event => {
event.preventDefault();
const anchorsId = anchors.getAttribute('href')
document.querySelector('' + anchorsId).scrollIntoView({
behavior: "smooth",
block: "start"
});
});
}
}
Это функция которая для элемента дает плавности прокрутки(одним словом якорь для плавной прокрутки страницы по id ) Ну вообщем суть не в этом, а как мне вызвать такие функции в главной функции где я динамически деал элементы? Вот часть кода:
function main(root, dataList) {
//PAGE 1
const aboutWrraper = document.createElement('div');
aboutWrraper.classList.add('about-wrraper');
aboutWrraper.classList.add('grid');
const introductionWrraper = document.createElement('div');
introductionWrraper.classList.add('introduction-wrraper');
introductionWrraper.classList.add('grid');
const advantagesWrraper = document.createElement('div');
advantagesWrraper.id = "center";
advantagesWrraper.classList.add('advantages-wrraper');
advantagesWrraper.classList.add('grid');
activeCard();
anchorsPage();
aboutWrraper.append(introductionWrraper, advantagesWrraper, biographyWrraper, buttonFormWrraper);
root.append(aboutWrraper);
}
main(document.querySelector('main'));
И я хочу обьявить в ней 2 функции из других файлов
import { activeCard } from "./activeCard";
import { anchorsPage } from "./anchorsPage";
В скрине написано что не так. P.S. на html это работат. А если страницы переводить динамически через js то вот такая ошибка:help: :help: :help: :help: :help: P.S. надеюсь понятно обьяснил |
Цитата:
https://learn.javascript.ru/event-delegation |
Можно небольшой пример? Там слабо можно понять как объединить пару функций, которые будут разную работу выполнять. В родительскую функцию
|
Alexander3928,
вместо того чтобы ставить клик на каждую ссылку, поставьте клик на их родителя, и тогда неважно когда ссылка появится на странице. |
Так это и не ссылка на переходы куда-то. Это две функции, одна создаёт еффект плавного скрола, а второй добавляет класс для span и меняет текст
|
плавный скролинг к якорю js
Цитата:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div,
body,
html {
height: 100%;
margin: 0;
padding: 0;
}
ul.tabs {
position: relative;
width: 100%;
height: 50px;
padding: 0;
margin: 0;
top: 0;
list-style: none;
overflow: hidden;
background-color: #AF5931;
}
li {
float: left;
width: 25%;
}
a {
line-height: .2em;
text-decoration: none;
text-align: center;
display: block;
color: #F0FFF0;
padding: 0.5em 0;
font-size: 2em;
font-weight: bold;
-webkit-transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
transition: 0.8s ease-in-out;
}
a:hover {
color: #00BFFF;
}
#dizzy {
background-color: #1E90FF;
}
#ninja {
background-color: #D675FF;
}
#missy {
background-color: #FFFF85;
}
@media screen and (max-width: 800px) {
ul.tabs {
height: 15px;
position: fixed;
top: 0;
}
#dizzy {
margin-top: 15px;
}
a {
font-size: .7em;
line-height: .1em;
}
}
</style>
<script>
document.addEventListener('click', function(event) {
let target = event.target;
if (target = target.closest('a[href*="#"]')) {
event.preventDefault();
const anchorsId = target.hash;
document.querySelector(anchorsId).scrollIntoView({
behavior: "smooth",
block: "start"
});
}
});
</script>
</head>
<body>
<ul class="tabs">
<li><a class="tab" href="#dizzy">Dizzy</a></li>
<li><a class="tab" href="#ninja">Ninja</a></li>
<li><a class="tab" href="#missy">Missy</a></li>
</ul>
<div id="dizzy">Dizzy
<!-- panel content -->
</div>
<div id="ninja">Ninja
<!-- panel content -->
</div>
<div id="missy">Missy
<!-- panel content -->
</div>
</body>
</html>
|
Цитата:
|
Да видемо я не понимаю как их вместе собрать
|
| Часовой пояс GMT +3, время: 18:48. |