blocks|key|2324271|text|可以动态地更改JavaScript数组：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2324272|var+array+=+[];

function+foo()+{
++array.push('foo');
}

function+boo()+{
++array.push('boo');
}|code-block|syntax|javascript|2324273|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>JavaScript array could be dynamicaly changed:</p>

<pre><code>var array = [];

function foo() {
  array.push('foo');
}

function boo() {
  array.push('boo');
}
</code></pre>


blocks|key|645451|text|一个非常简单的例子：http://jsfiddle.net/pimvdb/unEMp/。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|645452|<input+type="text"+id="textbox">
<br>
<input+type="button"+id="add"+value="Add">
<br>
<input+type="button"+id="view"+value="View+all+Contents">|code-block|syntax|javascript|645453|通过以下方式：|645454|var+arr+=+[];+//+the+array

document.getElementById('add').onclick+=+function()+{
++++arr.push(document.getElementById('textbox').value);+//+add+textbox+value+to+array
++++document.getElementById('textbox').value+=+'';+//+clear+textbox+value
};

document.getElementById('view').onclick+=+function()+{
++++alert(arr.join(',+'));+//+alert+array+contents+as+a+string;+elements+are+delimited+by+',+'
};|645455|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/pimvdb/unEMp/^0|A|X|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>A very trivial example: <a href="http://jsfiddle.net/pimvdb/unEMp/" rel="nofollow">http://jsfiddle.net/pimvdb/unEMp/</a>.</p>

<pre><code>&lt;input type="text" id="textbox"&gt;
&lt;br&gt;
&lt;input type="button" id="add" value="Add"&gt;
&lt;br&gt;
&lt;input type="button" id="view" value="View all Contents"&gt;
</code></pre>

<p>with:</p>

<pre><code>var arr = []; // the array

document.getElementById('add').onclick = function() {
    arr.push(document.getElementById('textbox').value); // add textbox value to array
    document.getElementById('textbox').value = ''; // clear textbox value
};

document.getElementById('view').onclick = function() {
    alert(arr.join(', ')); // alert array contents as a string; elements are delimited by ', '
};
</code></pre>


blocks|key|647318|text|首先，您需要在全局范围内创建数组--这意味着在方法主体之外，在<script></script>主体中的某个地方：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|647319|var+myArray+=+new+Array();|code-block|syntax|javascript|647320|接下来，您将希望每次用户单击一个按钮时都添加一个新值：|647321|function+myButtonClick(){
++++var+myTb+=+document.getElementById("textBox1");
++++myArray.push(myTb.value);
++++myTb.value+=+"";+//+reset+the+textbox
}+|647322|接下来，您需要另一个按钮处理程序来单击“查看所有”：|647323|function+myViewAllButtonClick(){
+++//+will+create+a+string+of+myArray's+values,+seperated+by+new+line+character
+++var+msg+=+myArray.join("\n");
+++//+will+show+the+user+all+of+the+values+in+a+modal+alert
+++alert(msg);
}|647324|您的HTML看起来可能如下：|647325|<input+type="text"+id="textBox1"+/>
<input+type="button"+id="button1"+value="Add+Value"+onclick="myButtonClick();"/>
<input+type="button"+id="button2"+value="Show+All"+onclick="myViewAllButtonClick();"/>|647326|当你掌握了事物的诀窍时，你可以把“增值”按钮全部去掉，然后使用：|647327|<input+type="text"+id="textBox1"+onchange="onTextChanged(this)"/>|647328|有一个处理程序，如：|647329|function+onTextChanged(e){
++++if(e.value+==+"")+return;
++++myArray.push(e.value);
++++e.value+=+"";
}|647330|当用户更改textbox中的文本时，onTextChanged处理程序将触发(在文本框失去焦点之前，它不会触发，这可能会使其对本例不利，但仍然是一个很好的JS技能来学习/理解)。|647331|编码快乐-祝你好运！|647332|B|647333|entityMap^0|V|H|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1C|8|@$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1F|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1G|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|1H|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1I|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|1J|8|@]|D|@]|E|$I|J]]|$1|S|3|T|5|6|7|1K|8|@]|D|@]|E|$]]|$1|U|3|V|5|H|7|1L|8|@]|D|@]|E|$I|J]]|$1|W|3|X|5|6|7|1M|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|H|7|1N|8|@]|D|@]|E|$I|J]]|$1|10|3|11|5|6|7|1O|8|@]|D|@]|E|$]]|$1|12|3|13|5|H|7|1P|8|@]|D|@]|E|$I|J]]|$1|14|3|15|5|6|7|1Q|8|@]|D|@]|E|$]]|$1|16|3|17|5|6|7|1R|8|@]|D|@]|E|$]]|$1|18|3|19|5|6|7|1S|8|@]|D|@]|E|$]]|$1|1A|3|-4|5|6|7|1T|8|@]|D|@]|E|$]]]|1B|$]]

<p>First you'll want to create your array in the global scope - this means outside of a method body, somewhere in the <code>&lt;script&gt;&lt;/script&gt;</code> body:</p>

<pre><code>var myArray = new Array();
</code></pre>

<p>Next, you'll want to append the array with a new value each time the user clicks a button:</p>

<pre><code>function myButtonClick(){
    var myTb = document.getElementById("textBox1");
    myArray.push(myTb.value);
    myTb.value = ""; // reset the textbox
} 
</code></pre>

<p>Next, you'll want another button handler for the click on "View All":</p>

<pre><code>function myViewAllButtonClick(){
   // will create a string of myArray's values, seperated by new line character
   var msg = myArray.join("\n");
   // will show the user all of the values in a modal alert
   alert(msg);
}
</code></pre>

<p>Your HTML might look like:</p>

<pre><code>&lt;input type="text" id="textBox1" /&gt;
&lt;input type="button" id="button1" value="Add Value" onclick="myButtonClick();"/&gt;
&lt;input type="button" id="button2" value="Show All" onclick="myViewAllButtonClick();"/&gt;
</code></pre>

<p>When you get the hang of things, you can get rid of the "Add Value" button all together and use:</p>

<pre><code>&lt;input type="text" id="textBox1" onchange="onTextChanged(this)"/&gt;
</code></pre>

<p>With a handler like:</p>

<pre><code>function onTextChanged(e){
    if(e.value == "") return;
    myArray.push(e.value);
    e.value = "";
}
</code></pre>

<p>The onTextChanged handler will fire when the user changes text in the textbox (it won't fire though until the textbox loses focus, which may make it bad for this example, but still a good JS skill to learn/understand).</p>

<p>Happy coding - good luck!</p>

<p>B</p>


blocks|key|2324382|text|我举了一个小例子：http://jsbin.com/izumeb/3|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2324383|<p><input+type="text"+id="txt"></input><button+onclick="addToAll();">add+to+selection</button></p>+
<p><button+onclick="showAll();">show+all</button></p>+
<p+id="all"></p>+|code-block|syntax|javascript|2324384|和JS|2324385|<script>+
var+values+=+[];

function+addToAll()+{
++var+txt+=+document.getElementById("txt");
++values.push(txt.value);

++txt.value+=+"";
}

function+showAll()+{
++var+all+=+document.getElementById("all");
++var+str+=+"";
++for+(var+i=0;i<values.length;%2B%2Bi)+{
++++str+%2B=+values[i]+%2B+"<br/>";
++}

++all.innerHTML+=+str;
}
</script>|2324386|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/izumeb/3^0|9|P|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>i put together a small example: <a href="http://jsbin.com/izumeb/3" rel="nofollow">http://jsbin.com/izumeb/3</a></p>

<pre><code>&lt;p&gt;&lt;input type="text" id="txt"&gt;&lt;/input&gt;&lt;button onclick="addToAll();"&gt;add to selection&lt;/button&gt;&lt;/p&gt; 
&lt;p&gt;&lt;button onclick="showAll();"&gt;show all&lt;/button&gt;&lt;/p&gt; 
&lt;p id="all"&gt;&lt;/p&gt; 
</code></pre>

<p>and JS</p>

<pre><code>&lt;script&gt; 
var values = [];

function addToAll() {
  var txt = document.getElementById("txt");
  values.push(txt.value);

  txt.value = "";
}

function showAll() {
  var all = document.getElementById("all");
  var str = "";
  for (var i=0;i&lt;values.length;++i) {
    str += values[i] + "&lt;br/&gt;";
  }

  all.innerHTML = str;
}
&lt;/script&gt;
</code></pre>


<p>I am brand new in WebDevelopment and I came across the following issue.
 I have an html file where a textbox is defined as well as a "View all Contents" button</p>

<ol>
<li>The user can enter a value in the textbox and submit the data</li>
<li>Then repeat this action multiple times</li>
<li>Every time a new value is entered this value should be stored to a
Javascript array</li>
<li>The user will be able to view the contents of the Javascript array
when clicking on the button "View all Contents".</li>
</ol>

<p>So my problem is how these values are stored dynamically in Javascript and printed when the user is finished.</p>

<p>Your answer is very much appreciated.</p>

<p>Best Regards</p>

<p>Olga</p>


Javascript array dynamic population

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我是WebDevelopment的新手，我遇到了以下问题。我有一个定义文本框的html文件，还有一个“查看所有内容”按钮。用户可以在文本框中输入一个值并提交数据，然后每次输入新值时都重复此操作多次，此值应存储在Javascript数组中，用户在单击“查看所有内容”按钮时将能够查看Javascript数组的内容。因此，我...

问Javascript数组动态填充
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript数组动态填充EN