JavaScript随机旅行目的地生成器跳转故障排查求助

我看了你的代码，问题主要出在跳转逻辑的执行时机和元素内容的获取方式上，下面给你详细分析并修复：

问题分析 #

1. 跳转逻辑执行时机错误：你把跳转判断的代码写在了全局作用域里，页面一加载就会执行，但此时placeDisplay元素里还没有任何内容，自然不会触发跳转。
2. 错误获取元素内容：你直接用placeDisplay=="calgary"来判断，但placeDisplay并不是元素的文本内容——你需要先通过document.getElementById('placeDisplay')获取元素，再读取它的textContent或innerHTML属性。
3. 跳转逻辑未关联按钮事件：跳转操作应该在用户点击按钮生成新地点之后执行，所以要把判断逻辑放到differentPlace函数内部。

修复后的JavaScript代码 #

var place = ['sydney', 'calgary', 'london']; 

function differentPlace() { 
    // 生成随机地点并存储
    var randomNumber = Math.floor(Math.random() * place.length);
    var selectedPlace = place[randomNumber];
    // 更新页面显示的地点
    document.getElementById('placeDisplay').textContent = selectedPlace;

    // 根据选中的地点执行跳转
    switch(selectedPlace) {
        case "calgary":
            window.location.href = "http://ide50-w.cs50.io:8080/calgary";
            break;
        case "london":
            window.location.href = "http://ide50-w.cs50.io:8080/london";
            break;
        case "sydney":
            window.location.href = "http://ide50-w.cs50.io:8080/sydney";
            break;
    }
}

代码说明 #

• 先把随机选中的地点存到selectedPlace变量里，既方便更新页面显示，也避免重复获取DOM内容，让代码更高效。
• 用switch语句替代多个else if，让固定值判断的逻辑更简洁易读（如果习惯用else if也可以，功能是一样的）。
• 把跳转逻辑完全放到differentPlace函数内部，确保每次用户点击按钮生成新地点后，立即触发判断和跳转。

你的HTML代码不需要修改，保持原样即可：

<body>
  <h2>Discover a new destination:</h2>
  <div id="placeDisplay">
  </div>
  <button onclick="differentPlace()">Find your next journey!</button>
  <script src="javascript.js"></script>
</body>

这样修改后，用户点击按钮时，会先随机显示一个地点，然后立即跳转到对应的页面啦！

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