如何从JavaScript函数中获取返回值并传递给其他函数或设为全局变量

问题根因 #

• 页面加载完毕时JS就立即执行了var a5 = add()，此时用户还未填写输入框、也没有点击Add按钮，拿到的自然是空值；后续点击按钮触发add()时的返回值也没有被接收存储
• form标签内的button默认是type="submit"，点击后会触发表单提交刷新页面，刚拿到的值会直接丢失

修复方案 #

第一步 修改HTML代码 #

给button添加type="button"属性，避免点击触发表单提交刷新：

<!DOCTYPE html>
<html>
    <head>
        <title>Basic Web Page</title>
        <script>
            console.log('hello world!');
        </script>
    </head>
    <body>
       <form>
    a: <input type="number" name="a" id="a"><br>
    <!-- 这里新增type属性 -->
    <button type="button" onclick="add()">Add</button>
     <p id="greeting">Greetings</p>
  </form>
  <script src="java.js"></script>
    </body>
</html>

第二步 修改JS代码 #

如果你需要把add()的返回值设为全局变量供其他函数调用，改写成如下逻辑即可：

// 先声明全局变量，用来存储点击按钮后的返回值
let a5;
function add() {
    var a3 = document.getElementById('a').value;
    // 点击按钮时把返回值赋值给全局变量
    a5 = a3;
    // 测试打印可自行删除
    console.log('当前拿到的输入值：', a3);
    console.log('全局变量a5的值：', a5);
    return a3;    
}

// 其他需要用到该值的函数可以直接调用全局变量a5
function testUseVal() {
    if (a5) {
        console.log('其他函数拿到的值：', a5);
    }
}

如果你只是要把值传递给其他函数，也可以直接在add()内部调用对应函数传参，不需要额外存全局变量：

function add() {
    var a3 = document.getElementById('a').value;
    // 直接把值作为参数传给其他函数
    testUseVal(a3);
    return a3;    
}

function testUseVal(val) {
    console.log('接收到的参数：', val);
}

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