Question

我有一个简单的问题，即存储变量并将变量从一个函数传递到另一个函数。我的脚本应该像这样工作：

<input type="text" id="ip1" >    
         <input type="button" id="check_button" value="checking" onclick="check_text()">
         <input type="button" id="write_button" value="write" onclick="write()">
<p id="ag"></p>

如果有人在输入字段"ip1"中输入值并按下"check_button"，则该值应存储在变量中。单击"ag"时，此变量应写在"write_button"的innerHTML中。

这是我的JS。我知道这不起作用，我只是不知道如何正确地做到这一点。我发现了类似的问题，但对于像我这样的初学者来说，解决方案似乎总是很复杂。非常感谢一个非常简单的解决方案！

            function check_text() {
                var ui = document.getElementById('ip1').value;
            }

            function write() {
                document.getElementById('ag').innerHTML = ui;
            }

Answer 1

你应该在函数外声明变量：它必须工作

var ui = 0;
function check_text() {
 ui = document.getElementById('ip1').value;
}

function writeL() {
  document.getElementById('ag').innerHTML = ui;
}

    <input type="text" id="ip1" >    
             <input type="button" id="check_button" value="checking" onclick="check_text()">
             <input type="button" id="write_button" value="write" onclick="writeL()">
    <p id="ag"></p>

Answer 2

当然，有多种方法可以处理您的价值。下面的代码段使用HTMLFormControlsCollection。详细信息在代码段中注释。顺便说一句，我不得不摆脱其中一个按钮，它可能会阻碍你的理解，而不是帮助它。最好通过观看控制台来查看发生的事情。

<强>段

＆＃13;

/***NOTE: Any comment having a pencil icon: ✎
|| means that the expression/statement is there...
||...to show an alternate way. Although they...
||...aren't used in the functions, they can be...
||...used instead of it's counterpart.
*/


function processData() {

  // Reference the <form> by id or...

  var form1 = document.getElementById('form1');
  // ✎
  /*1*/
  console.log('1. This is ' + form1.id + '\n');

  /*...or by HTMLFormControlsCollection...
  ||...reference <form> as the first <form>...
  ||...the .forms is an array-like object...
  ||...the [0] is the index indicating which...
  ||...<form> it's referring to. This is easily...
  ||...determined since there's only one <form>...
  ||...on the page.
  */

  var formA = document.forms[0];
  /*2*/
  console.log('2. This is ' + formA.id + '\n');

  // We'll continue using the HTMLFormControlsCollection

  /* This is using previously declared formA to...
  ||...reference it's .elements property. The...
  ||...elements property is like the .forms...
  ||...except that it refers to a <form>'s...
  ||...field form elements like <input> and ...
  ||...<output>
  */

  var formUI = formA.elements;
  /*3*/
  console.log('3. This is an ' + formUI + '\n');

  // We can get the number of form control elements

  var qty = formUI.length;
  // ✎
  /*4*/
  console.log('4. form1 has ' + qty + ' form control  elements\n');

  /* Get the value of text1 by using the object formUI...
  ||...the name of <input>, and the .value property.
  */

  var TXT1 = formUI.text1.value;
  /*5*/
  console.log('5. The value of text1 is ' + TXT1 + '\n');

  /* We can get the same result by referencing <input>...
  || ...by it's index position in the formUI object...
  || This expression is getting the value of the first...
  ||...form field element of the <form> or formUI object
  */
  var TXTA = formUI[0].value;
  // ✎
  /*6*/
  console.log('6. The value of Text1 is still ' + TXTA + '\n');


  /* Return the value of TXT1
  || This function returns a value, so it can be...
  ||...assigned to a var as a value and it can be...
  ||...passed through another function like a...
  ||...parameter.
  */
  return TXT1;
}

/* This will pass a value...
||...reference the <output>...
||...and set <output> value to...
||...given value
*/
function displayData(value) {
  var output1 = document.getElementById('output1');
  output1.value = value;
}

/* When button1 is clicked...
||...store the return of processData() in a var...
||...then pass that var to displayData() function
*/
document.getElementById('button1').onclick = function(event) {
  var VAL = processData();
  displayData(VAL);
}

＆＃13;

input {
  font: inherit
}

＆＃13;

<form id='form1' name='form1'>
  <input type="text" id="text1" name='text1'>
  <input type="button" value="display" id='button1'>
  <br/>
  <output id="output1" name='output1'></output>
</form>

＆＃13;

Answer 3

您可以使用jQuery轻松完成此操作：

＆＃13;

commentsCount

＆＃13;

            var enteredValue = "";
            $("#check_button").on("click", function() {
              enteredValue = $("#ip1").val();
            });
            $("#write_button").on("click", function() {
              $('#store_value').html(enteredValue);
            });

＆＃13;

将变量存储/传递给另一个函数

3 个答案: