JavaScript函数间变量传递问题：path1显示undefined如何解决？

我有两个函数，一个通过if else条件定义path路径，想在另一个函数中用该路径绘制图表。catchit函数通过HTML的onclick事件触发调用，但控制台显示path1的值为undefined，相关代码如下：

allpredicted.js #

var path;         
 function catchit(no){    
    console.log(no)
    if (no ==1) {
        path="/static/data/submission1.csv"
      } else {
        path="/static/data/submission2.csv"
      } 
    parseData()
    }

 function parseData(createGraph) {
    var path1=path;
    console.log(path1);
    Papa.parse(path1,{
      download: true,
      complete: function(results) {
        createGraph(results.data);
        
      }
    });
  } 

cotton.html #

<div  class="btn-group-vertical">
  
  
  <button class="block" id="1" button-id="1" onclick="catchit(1)" ><a  href={% url 'reports' %}>Formget Online Form Builder Create Online </a></button>
       <div class="space">
      </div>
     <button class="block"  id="2" value="2" button-id="2" onclick="catchit(2)" ><a  href={% url 'reports' %}>Formget Online Form Builder Create Online </a></button>
      <div class="space">
      </div>
     <button class="block"  button-id="3" onclick="catchit(3)" >Formget Online Form Builder Create Online Forms</button>
    
      
     <script src="{% static 'javascripts/allpredicted.js' %}"  ></script>
     
     
    
    
    </div>

问题原因 #

1. 页面跳转导致全局变量丢失：前两个按钮内部包含<a>标签，点击按钮时会触发a标签的页面跳转，导致页面刷新，全局变量path被重置为初始的undefined，parseData还未完成执行就丢失了路径值。
2. 依赖全局变量的风险：使用全局变量传递路径，容易受页面刷新、作用域污染等因素影响，导致变量值异常。
3. 参数传递缺失：调用parseData()时未传入createGraph参数，后续回调中调用该函数会引发额外错误。

修复方案 #

1. 移除或阻止a标签的跳转行为

前两个按钮中的a标签是多余的，直接移除即可（如果不需要跳转）：

<button class="block" id="1" button-id="1" onclick="catchit(1)">Formget Online Form Builder Create Online</button>
<button class="block" id="2" value="2" button-id="2" onclick="catchit(2)">Formget Online Form Builder Create Online</button>

如果必须保留a标签，需阻止其默认跳转行为：

<button class="block" id="1" button-id="1" onclick="catchit(1); event.preventDefault();">
  <a href="{% url 'reports' %}">Formget Online Form Builder Create Online</a>
</button>

2. 优化路径传递方式（避免全局变量）

将路径作为参数直接传递给parseData，彻底消除全局变量带来的问题：

function catchit(no){    
    console.log(no)
    let path;
    if (no === 1) {
        path = "/static/data/submission1.csv"
    } else if (no === 2) {
        path = "/static/data/submission2.csv"
    } else if (no === 3) {
        path = "/static/data/submission3.csv" // 给第三个按钮添加专属路径
    } else {
        path = "/static/data/default.csv" // 兜底默认路径
    } 
    parseData(path)
}

function parseData(path) {
    console.log(path);
    // 先判断路径是否有效，避免Papa.parse报错
    if (!path) {
        console.error("路径未定义");
        return;
    }
    Papa.parse(path, {
        download: true,
        complete: function(results) {
            // 确保createGraph函数已定义再调用
            if (typeof createGraph === 'function') {
                createGraph(results.data);
            } else {
                console.error("createGraph函数未定义");
            }
        },
        error: function(error) {
            console.error("数据解析失败:", error);
        }
    });
} 

3. 补充错误处理（可选）

在parseData中添加错误处理逻辑，方便排查数据解析过程中出现的问题，提升代码健壮性。

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