Интегрировать результаты одной функции JavaScript в другую

Question

У меня возникли проблемы при интеграции обоих этих скриптов в мою HTML-страницу.

Во-первых, у меня есть один javascript, который компилирует результаты выпадающих и текстовых полей в строковый текст.Это прекрасно работает.

Второй JavaScript создает текстовый файл, который можно загрузить (в многострочном массиве).Я пытаюсь сделать так, чтобы результаты строки, сделанной в 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" />