Код JavaScript, скопированный с ручки кода, выдает ошибку

ProgramBox

Код JavaScript, скопированный с ручки кода, выдает ошибку

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

#javascript #html #css

Вопрос:

Я новичок в HTML CSS и javascript. Я немного поработал над созданием анимированных вкладок с индикаторами, используя HTML, CSS и JavaScript. Я застрял с редактированием файла JavaScript и ошибкой, которую я получаю при редактировании этого файла и получаю «синтаксическую ошибку в JavaScript» при использовании среды разработки Dreamweaver. Я попытался добавить ключевое слово функции и закрыть / добавить скобки, но пока не получилось. Похоже, CSS работает нормально, и я застрял с правильным написанием файла javascript. Там может не быть никаких синтаксических ошибок, так как он отлично работает в https://codepen.io/. Когда я компилирую его в Adobe DreamViewer, программное обеспечение выдает синтаксическую ошибку в самой 1 — й строке.

Причина, по которой я думаю, что это ошибка javascript, заключается в том, что, как я показал в примере, невозможно перемещаться между вкладками КОДА, О ПРОГРАММЕ, СЛУЖБАХ и КОНТАКТАХ в index.html страница (Изображение прилагается).

HTML

 <!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
    <script src="myScript.js"></script>
</head>

<div class="tabs">
    <div class="tab-header">
        <div class="active">
                    <i class="fa fa-code"></i>Code
            </div>      
        <div>
                <i class="fa fa-pencil-square-o"></i>About
        </div>      
        <div>
                <i class="fa fa-bar-chart"></i>Services
        </div>      
        <div>
                <i class="fa fa-envelop-o"></i>Contact
        </div>          
    </div>      
    <div class="tab-indicator"></div>
    <div class="tab-body">
        <div class="active">
            <h2>This is code section</h2>
            <p>Test is all about fun</p>
        </div>
        <div>
            <h2>This is about section</h2>
            <p>Test is all about fun</p>
        </div>      
        <div>
            <h2>This is services section</h2>
            <p>Test is all about fun</p>
        </div>      
        <div>
            <h2>This is section</h2>
            <p>Test is all about fun</p>
        </div>
        </div>  
</div>
</html>

язык JavaScript

 let tabHeader = document.getElementsByClassName("tab-header")[0];
let tabIndicator = document.getElementsByClassName("tab-indicator")[0];
let tabBody = document.getElementsByClassName("tab-body")[0];

let tabsPane = tabHeader.getElementsByTagName("div");

for(let i=0;i<tabsPane.length;i  ){
  tabsPane[i].addEventListener("click",function(){
    tabHeader.getElementsByClassName("active")[0].classList.remove("active");
    tabsPane[i].classList.add("active");
    tabBody.getElementsByClassName("active")[0].classList.remove("active");
    tabBody.getElementsByTagName("div")[i].classList.add("active");
    
    tabIndicator.style.left = `calc(calc(100% / 4) * ${i})`;
  });
}

CSS

 body {
  background:#ddd;
  font-family:"Raleway";
}
.tabs {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:500px;
  height:250px;
  background:#f5f5f5;
  padding:20px 30px;
  overflow:hidden;
  border-radius:50px;
  box-shadow:5px 10px 5px #ccc;
}
.tabs .tab-header {
  height:60px;
  display:flex;
  align-items:center;
}
.tabs .tab-header > div {
  width:calc(100% / 4);
  text-align:center;
  color:#888;
  font-weight:600;
  cursor:pointer;
  font-size:14px;
  text-transform:uppercase;
  outline:none;
}
.tabs .tab-header > div > i {
  display:block;
  margin-bottom:5px;
}
.tabs .tab-header > div.active {
  color:#00acee;
}
.tabs .tab-indicator {
  position:relative;
  width:calc(100% / 4);
  height:5px;
  background:#00acee;
  left:0px;
  border-radius:5px;
  transition:all 500ms ease-in-out;
}
.tabs .tab-body {
  position:relative;
  height:calc(100% - 60px);
  padding:10px 5px;
}
.tabs .tab-body > div {
  position:absolute;
  top:-200%;
  opacity:0;
  transform:scale(0.9);
  transition:opacity 500ms ease-in-out 0ms,
    transform 500ms ease-in-out 0ms;
}
.tabs .tab-body > div.active {
  top:0px;
  opacity:1;
  transform:scale(1);
}

1. В чем именно заключается ошибка и какая часть кода ее вызывает?

2. Ваш код JavaScript в том виде, в каком он опубликован, не выдает мне синтаксическую ошибку от узла.

3. Если HTML, который вы показываете в вопросе, действительно является тем HTML, который вы запускаете, в нем есть ошибки. Между классом и его знаком равенства не должно быть пробелов, ни после знака равенства, ни перед кавычками. JS не сможет найти элементы. Вы должны увидеть в журнале консоли вашего браузера некоторые ошибки, которые описывают это.

4. @Pointy Я изучил этот код с помощью CodePen. там нам не нужно объявлять функции, как я чувствую. но когда я копирую тот же код из CodePen JavaScript в программное обеспечение Adobe Dreamweaver, в нем говорится, что в 1-й строке есть ошибка, и я не могу проверить дальнейшие синтаксические ошибки. В любом случае ожидаемые результаты не приходят через Adobe Dreamweaver, хотя я сделал часть ссылок в html-коде.

5. @AHaworth пробелы = в HTML-разметке совершенно нормальны. Смотрите эту спецификацию и обратите внимание, что = она может быть окружена нулем или более пробелов.

Ответ №1:

Ваш код работает нормально. Вам не хватает метки тела

 </head>
<body>    <!-- Add this --- >

<div class="tabs">
.
 .
.
 .

   <div>
            <h2>This is section</h2>
            <p>Test is all about fun</p>
        </div>
        </div>  
</div>
</body> <!-- Add this --- >
</html>

 let tabHeader = document.getElementsByClassName("tab-header")[0];
let tabIndicator = document.getElementsByClassName("tab-indicator")[0];
let tabBody = document.getElementsByClassName("tab-body")[0];

let tabsPane = tabHeader.getElementsByTagName("div");

for(let i=0;i<tabsPane.length;i  ){
  tabsPane[i].addEventListener("click",function(){
    tabHeader.getElementsByClassName("active")[0].classList.remove("active");
    tabsPane[i].classList.add("active");
    tabBody.getElementsByClassName("active")[0].classList.remove("active");
    tabBody.getElementsByTagName("div")[i].classList.add("active");
    
    tabIndicator.style.left = `calc(calc(100% / 4) * ${i})`;
  });
}

 body {
  background:#ddd;
  font-family:"Raleway";
}
.tabs {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:500px;
  height:250px;
  background:#f5f5f5;
  padding:20px 30px;
  overflow:hidden;
  border-radius:50px;
  box-shadow:5px 10px 5px #ccc;
}
.tabs .tab-header {
  height:60px;
  display:flex;
  align-items:center;
}
.tabs .tab-header > div {
  width:calc(100% / 4);
  text-align:center;
  color:#888;
  font-weight:600;
  cursor:pointer;
  font-size:14px;
  text-transform:uppercase;
  outline:none;
}
.tabs .tab-header > div > i {
  display:block;
  margin-bottom:5px;
}
.tabs .tab-header > div.active {
  color:#00acee;
}
.tabs .tab-indicator {
  position:relative;
  width:calc(100% / 4);
  height:5px;
  background:#00acee;
  left:0px;
  border-radius:5px;
  transition:all 500ms ease-in-out;
}
.tabs .tab-body {
  position:relative;
  height:calc(100% - 60px);
  padding:10px 5px;
}
.tabs .tab-body > div {
  position:absolute;
  top:-200%;
  opacity:0;
  transform:scale(0.9);
  transition:opacity 500ms ease-in-out 0ms,
    transform 500ms ease-in-out 0ms;
}
.tabs .tab-body > div.active {
  top:0px;
  opacity:1;
  transform:scale(1);
}

 <div class="tabs">
    <div class="tab-header">
        <div class="active">
                    <i class="fa fa-code"></i>Code
            </div>      
        <div>
                <i class="fa fa-pencil-square-o"></i>About
        </div>      
        <div>
                <i class="fa fa-bar-chart"></i>Services
        </div>      
        <div>
                <i class="fa fa-envelop-o"></i>Contact
        </div>          
    </div>      
    <div class="tab-indicator"></div>
    <div class="tab-body">
        <div class="active">
            <h2>This is code section</h2>
            <p>Test is all about fun</p>
        </div>
        <div>
            <h2>This is about section</h2>
            <p>Test is all about fun</p>
        </div>      
        <div>
            <h2>This is services section</h2>
            <p>Test is all about fun</p>
        </div>      
        <div>
            <h2>This is section</h2>
            <p>Test is all about fun</p>
        </div>
        </div>  
</div>

1. Спасибо, что показали бирку тела, и я добавил, как было указано. Но все равно ошибка кода java-скрипта сохраняется

2. Это не ошибка javascript. Это предупреждение от dreamweaver. Попробуйте <ссылка rel=»таблица стилей» href=»стили.css» />

3. Спасибо за ваш отзыв. Причина, по которой я думаю, что это ошибка javascript, заключается в том, что, как я показал в примере, невозможно перемещаться между вкладками КОДА, СВЕДЕНИЙ О программе, СЛУЖБ и КОНТАКТОВ в index.html страница (изображение, прикрепленное в вопросе).

4. community.adobe.com/t5/dreamweaver/… попробуй это

5. Если вы просматриваете страницу в браузере Chrome, затем щелкните правой кнопкой мыши проверить элемент, перейдите на вкладку консоль. Он покажет вам, какая ошибка у вас в коде javascript. Если бы в вашем js-коде были ошибки, то он не запустил бы фрагмент SO.

Метки: выдает ошибку, Код Javascript, скопированный с ручки кода