Estoy creando una aplicación en Svelte y estoy tratando de agregarle un archivo .js previamente escrito. Traté de importarlo en el archivo main.js , pero me da un error: Cannot read properties of null (reading 'offsetHeight') Este es el archivo .js :
[...] function colorSubheadings() { // Replace subheading background colors var redStart = 255; var greenStart = 255; var blueStart = 255; var redEnd = 249; var greenEnd = 250; var blueEnd = 251; var redDiff = redEnd - redStart; var greenDiff = greenEnd - greenStart; var blueDiff = blueEnd - blueStart; var page = document.querySelector('.page'); var pageHeight = page.offsetHeight; var subheadings = document.getElementsByClassName('.chapter'); for (var i = 0; i < subheadings.length; i++) { // Get the position relative to .page var span = subheadings[i].querySelector('span'); var factor = span.offsetTop / pageHeight; var r = Math.floor(redDiff * factor + redStart); var g = Math.floor(greenDiff * factor + greenStart); var b = Math.floor(blueDiff * factor + blueStart); var color = 'rgb(' + r + ',' + g + ',' + b + ')'; // Color background based on position span.style.backgroundColor = color; span.style.boxShadow = '11px 0 0 ' + color + ', -13px 0 0 ' + color; } } [...] Y este es el archivo .svelte :
<script> //some functions </script> <div class="page"> [...] <div class="chapter-sidebar"> <div class="sidebar js-sidebar"> <div class="sidebar__wrapper"> <ul class="sidebar__list"> {#each files as { file } (file.name)} <li class="sidebar__list-item"> <a class="sidebar__link" href="#temp">{file.name.split('.').slice(0, -1).join('.')}</a> </li> {/each} </ul> </div> </div> En el archivo .svelte hay una barra de navegación lateral, como esta . En vanilla html funciona perfectamente, pero con svelte hay algunos errores, como que la barra de navegación no se "pega" en un lugar: si me desplazo hacia abajo, permanece en la parte superior de la página, en lugar de permanecer en una posición particular del pantalla, "siguiendo" el desplazamiento del usuario. Entonces, ¿qué puedo hacer para usar este archivo .js en mi proyecto esbelto? También probé esta solución, pero no funcionó para mí. Gracias de antemano.
¿Dónde se llama a la función colorSubheadings() ?
(Veo var subheadings = document.getElementsByClassName('.chapter') pero no hay elementos con clase 'chapter' en el archivo Svelte)
te sugiero que pruebes
index.html en la carpeta yourproject/puplic después de <script src="/build/bundle.js"></script> (en caso de que se llame a la función dentro del mismo archivo .js ).svelte (archivo .js dentro de la carpeta yourproject/src con la función exportada export colorSubheadings() {...} ) import {onMount} from 'svelte' import {colorSubheadings} from './xy.js' onMount(()=> { colorSubheadings() })Debe exportar la función en su archivo js antes de poder importarla en su archivo .svelte (u otro archivo JS).
export function colorSubheadings() { ... }