不知道如何将我的 javascript 代码从 codepen 调整为 Atom

Question

我只是在 codepen.io 上构建了这个简单的推荐 slider 和星星评论

https://codepen.io/Nalid/pen/abdaqvR

在将代码合并到我在文本编辑器（Atom）上构建的网站时，一切正常，除了 javascript 似乎没有执行，我尝试将“document.querySelector”更改为“document.getElementByID”或“ .getElementByClassName "; 在代码笔上它工作正常，但在 Atom 上，它又不能工作，最糟糕的是它移动到我的下一个和预览按钮的顶部。

HTML：

<div class="wrapper">
    <div data-carousel>
        <ul class="slide__list Wallop-list">
            <li class="slide__item Wallop-item Wallop-item--current">
                    <h2 class="slide__heading">Norma C.</h2>
                    <blockquote>
                        <p class="slide__quote">He estado buscando durante años un buen médico con respecto a la mamografía y otros tratamientos para mujeres, el Dr. Ramos fue el mejor experimentado con cualquier duda, sabiamente recomiendo su servicio, ¡el mejor médico de la ciudad!</p>
                        <div class="Stars slide__cite" style="--rating: 4.3;" aria-label="Rating of this product is 5 out of 5."></div>
            </li>
            <li class="slide__item Wallop-item">
                <h2 class="slide__heading">Priscila G.</h2>
                <blockquote>
                    <p class="slide__quote">El Dr. Ramos me lo recomendó un amigo, es muy profesional y siempre está dispuesto a ayudar, incluso fuera de su horario de trabajo, tiene muy buen equipo y es muy profesional.</p>
                    <div class="Stars slide__cite" style="--rating: 5;" aria-label="Rating of this product is 5 out of 5."></div>
                </blockquote>
            </li>
            <li class="slide__item Wallop-item">
                <h2 class="slide__heading">Dilan M.</h2>
                    <blockquote>
                        <p class="slide__quote">Soy de Francia y estoy acostumbrado a un hospital y servicio de alto nivel, y podría decir que los estándares y la profesionalidad del Dr. Ramos son más altos que la mayoría de los médicos y hospitales en Europa.</p>
                        <div class="Stars slide__cite" style="--rating: 4;" aria-label="Rating of this product is 5 out of 5.">
                    </blockquote>
            </li>
            <li class="slide__item Wallop-item">
                <h2 class="slide__heading">Margarita C.</h2>
                    <blockquote>
                        <p class="slide__quote">Llegué por primera vez al Dr. Ramos con la consulta gratuita en línea, se detectará un posible cáncer de mama, planeamos una cita en su consultorio al día siguiente, después de una cirugía unas semanas después, puedo decir que estoy fuera de peligro, GRACIAS TANTO doctor Ramos</p>
                        <div class="Stars slide__cite" style="--rating: 5;" aria-label="Rating of this product is 5 out of 5."></div>
                    </blockquote>
            </li>
            <li class="slide__item Wallop-item">
                <h2 class="slide__heading">Xochitl G.</h2>
                <blockquote>
                    <p class="slide__quote">He visto al Dr. Ramos en su oficina después de una consulta gratuita en línea emitida por Skype, me proporcionó un check-up ginecológico completo, seguramente lo recomendaré.</p>
                    <div class="Stars slide__cite" style="--rating: 5;" aria-label="Rating of this product is 5 out of 5."></div>
                </blockquote>
            </li>
            <li class="slide__item Wallop-item">
                <h2 class="slide__heading">Vanessa L.</h2>
                <blockquote>
                    <p class="slide__quote">Mucho mejor que cualquier otro oncólogo en Cancún, estoy hablando de experiencia.</p>
                    <div class="Stars slide__cite" style="--rating: 4.5;" aria-label="Rating of this product is 4 out of 5."></div>
                </blockquote>
            </li>
        </ul>
        <button class="button--prev Wallop-buttonPrevious btnRV" title="previous">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.9 50.2"><path d="M25.1 50.2L0 25.1 25.1 0l2.8 2.8L5.7 25.1l22.2 22.2z"/></svg>
        </button>
        <button class="button--next Wallop-buttonNext btnRV" title="next">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.9 50.2"><path d="M25.1 50.2L0 25.1 25.1 0l2.8 2.8L5.7 25.1l22.2 22.2z"/></svg>
        </button>
    </div>
</div>

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="reviewContainer">
    <button onclick="document.getElementById('id01').style.display='block'" class="w3-button btnR w3-large">Agregar una opinión</button>
    
</div>


<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="w3-container">
  

  <div id="id01" class="w3-modal">
    <div class="w3-modal-content w3-card-4 w3-animate-zoom" style="max-width:600px">

      <div class="w3-center"><br>
        <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-xlarge w3-hover-red w3-display-topright" title="Close Modal">&times;</span>
        
      </div>

      <form class="w3-container" action="/action_page.php">
        <div class="w3-section">
          <label><b>Nombre</b></label>
          <input class="w3-input w3-border w3-margin-bottom" type="text"  name="name" required>
          <label><b>Comentario</b></label>
          <textarea name="comment" class="w3-input w3-border w3-margin-bottom"></textarea>
             <label><b>Clasification</b></label>
          <div class="rating">
            <input id="star5" name="star" type="radio" value="5" class="radio-btn hide" />
            <label for="star5" >☆</label>
            <input id="star4" name="star" type="radio" value="4" class="radio-btn hide" />
            <label for="star4" >☆</label>
            <input id="star3" name="star" type="radio" value="3" class="radio-btn hide" />
            <label for="star3" >☆</label>
            <input id="star2" name="star" type="radio" value="2" class="radio-btn hide" />
            <label for="star2" >☆</label>
            <input id="star1" name="star" type="radio" value="1" class="radio-btn hide" />
            <label for="star1" >☆</label>
            <div class="clear"></div>
        </div>
<div class="txt-center">
          </div>
    </form>
             
          <button class="w3-button w3-block submitR w3-section w3-padding w3-margin-50" name="submit" type="submit">Enviar</button>
          
        </div>
      </form>

      <div class="w3-container w3-border-top w3-padding-16 w3-light-grey">
       
        </div>

      </div>

    </div>
  </div>
</div>

CSS：

@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

p {
    margin-top: 0;
    margin-bottom: 30px;
}

/* List reset */
ul {
    padding: 0;
    margin: 0;
}

button  {
    background-color: transparent;
    border: none;
    width: 65px;
    padding: 20px;
    transition: opacity 200ms;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate3d(0, -50%, 0);
    z-index: 2;
    
    svg {
        fill: #5ac3ca;
    }
    
    &:hover,
    &:focus {
        opacity: 0.6;
    }
}

.button--next {
    left: auto;
    right: 0;
    transform: translate3d(0, -50%, 0) rotate(180deg);
}

.wrapper {
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: 5;
}

.slide__list {
    width: calc(100vw - 40px);
    height: calc(100vw / 2);
    font-family: Lato, sans-serif;
    
    &::before,
    &::after {
        content: '';
        width: 180px;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        z-index: 1;
    }
    
    &::before {
        left: 0;
        background: none;
    }
    
    &::after {
        right: 0;
        background: none;
    }
}

.slide__item {
    width: 100%;
    height: 100%;
    padding: 40px 65px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    
    > * {
        width: 100%;
    }
}

.slide__heading,
.slide__quote,
.slide__cite {
    opacity: 0;
    animation-timing-function: var(--originalCurve);
    width: calc(100% - 120px);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.slide__heading {
    --delay: 300ms;
    
    text-transform: uppercase;
    font-size: 1.2rem;
    letter-spacing: 0.05em;
}
    
.slide__quote {
    --delay: 420ms;
    
    font-size: 1.1rem;
    line-height: 1.4;
    letter-spacing: 0.03em;
}

.slide__cite {
    --delay: 540ms;
    
    display: block;
}

[data-carousel] {
  position: relative;
}

.Wallop-list {
  position: relative;
  overflow: hidden;
}

.Wallop-item {
    --x1: 0.1;
  --y1: 0.67;
  --x2: 0.29;
  --y2: 0.98;
  
  --originalCurve: cubic-bezier(var(--x1), var(--y1), var(--x2), var(--y2));
    --reversedCurve: cubic-bezier(calc(1 - var(--x2)), calc(1 - var(--y2)), calc(1 - var(--x1)), calc(1 - var(--y1)));
    
    --length: 1300ms;
    
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.Wallop-item--current {
  visibility: visible;
  position: relative;
    
    .slide__heading,
    .slide__quote,
    .slide__cite {
        animation: slideIn var(--length) forwards var(--originalCurve);
    }
}

.Wallop-item--showPrevious {
  .slide__heading,
    .slide__quote,
    .slide__cite {
        animation: slideOut var(--length) var(--delay) forwards reverse var(--reversedCurve);
    }
}

.Wallop-item--showNext {
    .slide__heading,
    .slide__quote,
    .slide__cite {
        animation: slideIn var(--length) var(--delay) forwards var(--originalCurve);
    }
}

.Wallop-item--hidePrevious,
.Wallop-item--hideNext {
    --length: 500ms;
  visibility: visible;
}

.Wallop-item--hidePrevious {
    .slide__heading,
    .slide__quote,
    .slide__cite {
        animation: slideOut var(--length) forwards var(--originalCurve);
    }
}

.Wallop-item--hideNext {
    .slide__heading,
    .slide__quote,
    .slide__cite {
        animation: slideIn var(--length) forwards reverse var(--reversedCurve);
    }
}


/* Custom keyframe animation */

@keyframes slideIn {
    0% {
        transform: translate3d(50%, 0, 0);
        opacity: 0;
    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes slideOut {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        transform: translate3d(-50%, 0, 0);
        opacity: 0;
    }
}

:root {
  --star-size: 60px;
  --star-color: rgba(207, 207, 207, 0.55);
  --star-background: #fc0;
}

.Stars {
  --percent: calc(var(--rating) / 5 * 100%);
    display: inline-block;
  font-size: var(--star-size);
  font-family: Times; // make sure ★ appears correctly
  line-height: 1;
    font-size: 2vw;  
  &::before {
    content: '★★★★★';
    letter-spacing: 3px;
    background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
    -webkit-background-clip: text;
    -webkit-text-fill-color:transparent;
  }
}


.txt-center {
  text-align: center;
}
.hide {
  display: none;
}

.clear {
  float: none;
  clear: both;
}

.rating {
    width: 90px;
    unicode-bidi: bidi-override;
    direction: rtl;
    text-align: center;
    position: relative;
}

.rating > label {
    float: right;
    display: inline;
    padding: 0;
    margin: 0;
    position: relative;
    width: 1.1em;
    cursor: pointer;
    color: #000;
}

.rating > label:hover,
.rating > label:hover ~ label,
.rating > input.radio-btn:checked ~ label {
    color: transparent;
}

.rating > label:hover:before,
.rating > label:hover ~ label:before,
.rating > input.radio-btn:checked ~ label:before,
.rating > input.radio-btn:checked ~ label:before {
    content: "\2605";
    position: absolute;
    left: 0;
    color: #FFD700;
}
.clR{
  text-align: left !important;
}
.btnR{
  background-color: #5ac3ca !important;
  color:white !important;
}
.submitR{
  background-color: #5ac3ca !important;
  color: white !important;
    grid-column: 5 / 10;
}

.reviewContainer{
    display: grid;
    grid-template-columns: repeat(10, 10vw);
    grid-template-rows: repeat(4, 10vh);
    border: 4px solid red;
    margin-top: -25vh;
} 

Javascript：

const slider = document.querySelector('[data-carousel]');
const slides = [...document.querySelectorAll('.Wallop-item')]
this.wallop = new Wallop(slider); 

let prev = 0 

const removePrevClasses = (index) => {
    let prevClass
    if (slides[index].classList.contains('Wallop-item--hidePrevious')) {
        prevClass = 'Wallop-item--hidePrevious'
    } else if (slides[index].classList.contains('Wallop-item--hideNext')) {
        prevClass = 'Wallop-item--hideNext'
    }
    
    if (prevClass) {
        setTimeout(() => {
        slides[index].classList.remove(prevClass)
    }, 600)
    }
}

const onChange = () => {
    removePrevClasses(prev)
    prev = this.wallop.currentItemIndex
}

this.wallop.on('change', onChange);

//Reviews

let focusedElementBeforeModal;
var modal = document.getElementById('modal');
var modalOverlay = document.querySelector('.modal-overlay');

window.onload = () => {
  var addReview = document.getElementById('review-add-btn');
  addReview.id = 'review-add-btn';
  addReview.innerHTML = '+';
  addReview.setAttribute('aria-label', 'add review');
  addReview.title = 'Add Review';
  addReview.addEventListener('click', openModal);
 // addReview.click();
} 

var openModal = () => {
  // Save current focus
  focusedElementBeforeModal = document.activeElement;

  // Listen for and trap the keyboard
  modal.addEventListener('keydown', trapTabKey);

  // Listen for indicators to close the modal
  modalOverlay.addEventListener('click', closeModal);
  // Close btn
  var closeBtn = document.querySelector('.close-btn');
  closeBtn.addEventListener('click', closeModal);

  
  
  // Convert NodeList to Array
  focusableElements = Array.prototype.slice.call(focusableElements);

  var firstTabStop = focusableElements[0];
  var lastTabStop = focusableElements[focusableElements.length - 1];

  // Show the modal and overlay
  modal.classList.add('show');
  modalOverlay.classList.add('show');

  // Focus first child
  // firstTabStop.focus();
  var reviewName = document.getElementById('reviewName');
  reviewName.focus();

  function trapTabKey(e) {
    // Check for TAB key press
    if (e.keyCode === 9) {

      // SHIFT + TAB
      if (e.shiftKey) {
        if (document.activeElement === firstTabStop) {
          e.preventDefault();
          lastTabStop.focus();
        }

      // TAB
      } else {
        if (document.activeElement === lastTabStop) {
          e.preventDefault();
          firstTabStop.focus();
        }
      }
    }

    // ESCAPE
    if (e.keyCode === 27) {
      closeModal();
    }
  }
};

var submitAddReview = (e) => {
  // console.log(e);
  console.log('Form subbmitted!');
  e.preventDefault();
  closeModal();
};

var closeModal = () => {
  // Hide the modal and overlay
  modal.classList.remove('show');
  modalOverlay.classList.remove('show');

  var form = document.getElementById('review-form');
  form.reset();
  // Set focus back to element that had it before the modal was opened
  focusedElementBeforeModal.focus();
};

var setFocus = (evt) => {
  var rateRadios = document.getElementsByName('rate');
  var rateRadiosArr = Array.from(rateRadios);
  var anyChecked = rateRadiosArr.some(radio => { return radio.checked === true; });
  // console.log('anyChecked', anyChecked);
  if (!anyChecked) {
    var star1 = document.getElementById('star1');
    star1.focus();
    // star1.checked = true;
  }
};

var navRadioGroup = (evt) => {
  // console.log('key', evt.key, 'code', evt.code, 'which', evt.which);
  // console.log(evt);
  
  var star1 = document.getElementById('star1');  
  var star2 = document.getElementById('star2');  
  var star3 = document.getElementById('star3');  
  var star4 = document.getElementById('star4');  
  var star5 = document.getElementById('star5');  

  if (['ArrowRight', 'ArrowLeft', 'ArrowDown', 'ArrowUp'].includes(evt.key)) {
    evt.preventDefault();
    // console.log('attempting return');
    if (evt.key === 'ArrowRight' || evt.key === 'ArrowDown') {
      switch(evt.target.id) {
        case 'star1':
          star2.focus();
          star2.checked = true;
          break;
        case 'star2':
          star3.focus();
          star3.checked = true;
          break;
        case 'star3':
          star4.focus();
          star4.checked = true;
          break;
        case 'star4':
          star5.focus();
          star5.checked = true;
          break;
        case 'star5':
          star1.focus();
          star1.checked = true;
          break;
      }
    } else if (evt.key === 'ArrowLeft' || evt.key === 'ArrowUp') {
      switch(evt.target.id) {
        case 'star1':
          star5.focus();
          star5.checked = true;
          break;
        case 'star2':
          star1.focus();
          star1.checked = true;
          break;
        case 'star3':
          star2.focus();
          star2.checked = true;
          break;
        case 'star4':
          star3.focus();
          star3.checked = true;
          break;
        case 'star5':
          star4.focus();
          star4.checked = true;
          break;
      }
    }
  }
};

Answer 1

我认为您可能缺少的是在 HTML 文档中包含 javascript 代码（codepen 可能会为您执行此操作）

您能否将 JavaScript 代码包装在标签中并将其包含在 HTML 文档的底部，然后重试？

例子：

<script>
  // The JavaScript from codepen goes here!
</script>

Answer 2

嗯，有时候，你花了很多时间寻找答案，你认为你到处寻找，但你寻找最复杂的方法，但实际上很简单.. 我刚刚添加

<script src="cdn.tutorialjinni.com/wallop/2.4.1/js/Wallop.js"></>

进入我的头部标签，它现在正在工作。