Webflow按钮跳转URL含完整代码片段问题排查与解决

问题描述 #

我不是开发人员，在Webflow中用代码实现点击按钮从集合随机获取CMS条目，但点击按钮后，URL里包含了完整的代码片段。想知道问题原因，以及如何让URL在randomSlug后结束。

错误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>

问题原因 #

1. 选择器范围错误：.slug类被错误添加到了代码块或包含代码的元素上，导致document.querySelectorAll('.slug')把代码文本也当成slug内容抓取，最终拼接到URL中。
2. DOM加载时机问题：如果代码在页面元素未完全加载时就执行，可能无法正确获取CMS条目中的slug元素，反而误取到页面中的代码文本。

解决方法 #

1. 精准控制.slug选择范围 #

• 打开Webflow编辑器，检查所有带.slug类的元素，仅CMS集合里的slug文本元素可使用该类，代码块、其他无关元素绝对不能添加.slug类。
• 将选择器改成更精准的格式，比如#your-collection-id .slug（替换your-collection-id为实际集合容器ID），缩小抓取范围，避免误选代码。

2. 调整代码执行时机与内容 #

把代码修改为以下形式，确保DOM加载完成后再执行，同时清理slug的多余空格：

<script> 
document.addEventListener('DOMContentLoaded', () => {
    const randomButton = document.querySelector('#random-button')
    const slugs = document.querySelectorAll('#your-collection-id .slug') // 使用精准选择器
    if (slugs.length === 0) return; // 防止无slug时出错

    const randomIndex = Math.floor(Math.random() * slugs.length)
    const randomSlug = slugs[randomIndex].textContent.trim() // 去除文本前后空格

    randomButton.addEventListener('click', () => {
        window.location = `https://flashcards-93432a.webflow.io/laws-of-ux/${randomSlug}`
    })
})
</script>

3. 正确放置代码位置 #

在Webflow页面设置中，将这段代码放到「Before tag」区域，不要直接嵌入页面内容里，避免代码文本被页面元素误抓取。

内容的提问来源于stack exchange，提问作者lotra91