如何将JavaScript的generate函数结果整合到下载函数的多行数组中

问题根源 #

你当前的代码里，generate()函数中的result是局部变量，外部的getLastUpdated()函数根本访问不到它，所以点击下载按钮时，获取到的内容是未定义的，自然没法把生成的字符串加入到下载的数组里。

修复方案 #

我们只需要调整变量的作用域，让result能被下载函数访问到，或者直接在下载时调用generate()获取最新结果就行。这里提供两种简单的修复方式，选哪种都可以：

方式一：将result改为全局变量

把result声明在函数外部，这样所有函数都能访问到最新的结果值：

// 把result提升到全局作用域
let result = '';

function generate(){ 
  result = '';
  result += document.getElementById('drop1').value + ' - ';
  result += document.getElementById('drop2').value + ' - ';
  result += document.getElementById('drop3').value + ' - ';
  result += document.getElementById('text1').value + ' - ';
  result += document.getElementById('text2').value;
  document.getElementById('output').innerHTML = result; 
} 

generate(); 

function download(filename, text) { 
  var element = document.createElement('a'); 
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); 
  element.setAttribute('download', filename); 
  element.style.display = 'none'; 
  document.body.appendChild(element); 
  element.click(); 
  document.body.removeChild(element); 
} 

// 现在可以直接返回全局的result了
function getLastUpdated() { 
  return result; 
} 

// Start file download. 
document.getElementById("dwn-btn").addEventListener('click', function(){ 
  // Generate download of hello.txt file with some content 
  var text = [ 
    'A rather long string of English text, an error message', 
    getLastUpdated(), 
    'end' 
  ].join('\n'); 
  var filename = "hello.txt"; 
  download(filename, text.replace(/\n/g, '\r\n')); // Convert LF ro CRLF 
}, false);

方式二：直接在下载时调用generate()获取结果

这种方式更简洁，不用额外的全局变量，直接在点击下载时确保先更新最新结果，再获取：

function generate(){ 
  let result = '';
  result += document.getElementById('drop1').value + ' - ';
  result += document.getElementById('drop2').value + ' - ';
  result += document.getElementById('drop3').value + ' - ';
  result += document.getElementById('text1').value + ' - ';
  result += document.getElementById('text2').value;
  document.getElementById('output').innerHTML = result; 
  // 直接返回生成的结果
  return result;
} 

generate(); 

function download(filename, text) { 
  var element = document.createElement('a'); 
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); 
  element.setAttribute('download', filename); 
  element.style.display = 'none'; 
  document.body.appendChild(element); 
  element.click(); 
  document.body.removeChild(element); 
} 

// Start file download. 
document.getElementById("dwn-btn").addEventListener('click', function(){ 
  // 调用generate()获取最新的结果
  const latestResult = generate();
  var text = [ 
    'A rather long string of English text, an error message', 
    latestResult, 
    'end' 
  ].join('\n'); 
  var filename = "hello.txt"; 
  download(filename, text.replace(/\n/g, '\r\n')); // Convert LF ro CRLF 
}, false);

对应的HTML部分（无需修改） #

<select id="drop1" onchange="generate()">
  <option value="d1s1">D1 S1</option>
  <option value="d1s2">D1 S2</option>
</select>
<select id="drop2" onchange="generate()">
  <option value="d2s1">D2 S1</option>
  <option value="d2s2">D2 S2</option>
</select>
<select id="drop3" onchange="generate()">
  <option value="d3s1">D3 S1</option>
  <option value="d3s2">D3 S2</option>
</select>
<input id="text1" type="text" value="text1" onchange="generate()" onkeyup="generate()" />
<input id="text2" type="text" value="text2" onchange="generate()" onkeyup="generate()" />
<p id="output"></p>
<input type="button" id="dwn-btn" value="Download" />

现在你点击下载按钮时，就能把generate()生成的最新字符串作为单行内容加入到下载的TXT文件里啦～

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