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声明。不返回任何东西的功能吓到我了！：微笑：

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: