Search code examples
javascriptarraysfunctiondocument.write

javascript function array variable an function schicken


ich brauche dringend Eure Hilfe, zur Verständnis. Im 1. Beispiel funktioniert mein Test Script normal. im 2. habe ich die beiden Abschnitte in jeweils eine Funktion gepackt und in der Console folgender Fehler angezeigt:

Uncaught ReferenceError: test is not defined : test_js.html:26

Frage, wie kann ich denn die Arrays in der 2. Funktion auslesen?

question

i've two functions. One with an array and one with a write function. I like to have the variable from function 1 to display in function 2. Hope you understand my problem?!

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<script language="javascript">
 
var test = new Array();

for(a=0; a<19;a++) {

test[a]= " bla bla "+a;
 }
 
</script>
<body>

 
<div>
<script language="javascript">
 
	
for(b=0; b<test.length;b++){
document.write('<a href="'+test[b]+'">'+test[b]+'</a><br><hr>');
} 

</script>
 </div>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<script language="javascript">
function a(){
var test = new Array();

for(a=0; a<19;a++) {

test[a]= " bla bla "+a;
 }
}

 a();
</script>
<body>

 
<div>
<script language="javascript">
function zeig(){
	
for(b=0; b<test.length;b++){
document.write('<a href="'+test[b]+'">'+test[b]+'</a><br><hr>');
}}
zeig();

</script>
 </div>
</body>
</html>


Solution

  • Few pointers:

    • Its a bad practice to pollute Global scope, so try to avoid it as much as possible. Why to avoid global variables
    • When you declare variables without var, they become global by default.
    • Its a bad practice to append DOM inside a loop. You should create a HTML string and perform a bulk operation.

    Also, if it is possible to move JS out of HTML to a single file, you can avoid using global scope.

    JSFiddle

    (function() {
      // This is not a global variable. Its scope is limited to functions defined in IIFE
      var TEST = new Array();
    
      function a() {
        for (var a = 0; a < 19; a++) {
          TEST.push(" bla bla " + a);
        }
      }
      a();
    
      function zeig() {
        var _html = TEST.reduce(function(p, c) {
            return p + '<a href="' + c + '">' + c + '</a><br><hr>'
          }, "")
          /*for (var b = 0; b < TEST.length; b++) {
            _html += '<a href="' + TEST[b] + '">' + TEST[b] + '</a><br><hr>'
          }*/
        document.getElementById("content").innerHTML = _html;
      }
    
      window.addEventListener("load", zeig);
    })()
    <body>
      <div id="content">
      </div>
    </body>

    Note: I have used an array function(array.reduce) but have also kept for logic as comment. You can look-up to these functions later. Also you will notice I have renamed test to TEST. Its a convention that you should use all caps for global variables. Also if you use global variables, use should use window.VariableName. This will improve readability and help you in debug.