将一个javascript函数的结果集成到另一个中

Question

我在将这些脚本集成到我的HTML页面时遇到了问题。

首先，我有一个javascript，它将下拉框和文本框的结果编译成字符串文本。这很好。

第二个javascript创建一个可以下载的txt文件（在多行数组中）。我想要做的是获取在function generate()中生成的字符串的结果在javascript下载命令数组中显示为单行...

仅供参考 - 由于其重量轻，我在一个html文件中拥有所有这些...

在此先感谢您的帮助！

function generate(){
    var 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);
}

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);

<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" />

Answer 1

你试图引用result函数的局部generate变量，好像它是一个全局的，可以从getLastUpdated里面获得。一个解决方案是使全球化。有各种各样的原因可能是一个坏主意。更好的方法是从generate函数内部和生成下载文本的侦听器中生成可生成该文本的代码。为此，我更改了getLastUpdate进行实际计算，然后从generate内部和该侦听器调用它。最重要的是return声明。不返回任何东西的功能吓到我了！ ：微笑：

function getLastUpdated() {
    var 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;
    return result;
}

function generate(){
  var result = getLastUpdated()
	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);
}


// 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);

<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" />