javascript window.locationurl是否拉入整个代码段？

wkyowqbh 于 2023-04-28 发布在 Java

关注(0)|答案(2)|浏览(97)

我很抱歉，因为这可能是一个非常简单的问题，但我不是一个开发人员。当单击按钮时，我使用此代码从Webflow中的集合中提取一个随机的CMS项目，但当我单击按钮时，url最终包含整个代码片段。为什么会这样？如何指定url变量在randomSlug之后结束？
示例：https://flashcards-93432a.webflow.io/study它指向的示例url：https://flashcards-93432a.webflow.io/laws-of-ux/%20const%20randomButton%20=%20document.querySelector('#random-button')const%20slugs%20=%20document.querySelectorAll('.slug')const%20randomIndex%20=%20Math.floor(Math.random()%20*%20slugs.length)const%20randomSlug%20=%20slugs[randomIndex].textContentconst%20url%20=%20%22https://flashcards-93432a.webflow.io/laws-of-ux/%22%20+%20randomSlug;randomButton.addEventListener('click',%20()%20=%3E%20{window.location%20=%20url})

<script> 
const randomButton = document.querySelector('#random-button')
const slugs = document.querySelectorAll('.slug')
const randomIndex = Math.floor(Math.random() * slugs.length)
const randomSlug = slugs[randomIndex].textContent

const url = "https://flashcards-93432a.webflow.io/laws-of-ux/" + randomSlug;

randomButton.addEventListener('click', () => {
    window.location = url
})
</script>

JavaScript

来源：https://stackoverflow.com/questions/76113088/window-location-url-pulling-in-entire-code-snippet

2条答案

按热度按时间

fae0ux8s1#

看起来问题出在url变量的定义方式上。当您将randomSlug变量连接到URL字符串的末尾时，您将在URL中包含整个代码段，因为randomSlug变量的textContent属性包含整个脚本标记的文本。
要解决这个问题，你需要确保randomSlug变量只包含你感兴趣的元素的文本内容。您可以通过选择包含slug文本的元素并使用textContent属性获取其文本内容来完成此操作。试试下面的代码，让我知道它是否有效：

const randomButton = document.querySelector('#random-button');
const slugs = document.querySelectorAll('.slug');
const randomIndex = Math.floor(Math.random() * slugs.length);
const randomSlugElement = slugs[randomIndex];
const randomSlug = randomSlugElement.textContent;

const url = "https://flashcards-93432a.webflow.io/laws-of-ux/" + randomSlug;

randomButton.addEventListener('click', () => {
    window.location = url;
});

赞(0）回复(0）举报 2023-04-28

syqv5f0l2#

想明白了！我误解了指示，并添加了。slug类添加到错误的HTML Embed项。
通过将javascript embed上的类更改为唯一的并添加。slug类嵌入到每个集合列表项中。它现在工作正常。谢谢大家！
https://flashcards-93432a.webflow.io/study

赞(0）回复(0）举报 2023-04-28