-Code in jsfiddle funktioniert aber nicht in HTML-Seite

I-Code von Max lines textarea bin mit einem Textfeld mit nur 9 Zeilen zu erstellen und dieser Code funktioniert perfekt auf meinem jsfiddle, https://jsfiddle.net/cityFoeS/3j48cpzn/ Der Textbereich wird den Textbereich zu 9 Zeilen nicht begrenzen, wie ich es will zu.-Code in jsfiddle funktioniert aber nicht in HTML-Seite

mein HTML:

<html> 
<head> 
<style> 
body { 
    background: black; 
} 
textarea { 
    overflow: hidden; 
    resize: none; 
    font-family: courier; 
    color: white; 
    outline: none; 
    line-height: 20px; 
    margin: 0; 
    padding: 0; 
    border: 0; 
    left: 45px; 
    position: absolute; 
    font-size: 14px; 
    background-color: black; 
    border-bottom: 1px solid white; 
} 
div { 
    font-family: courier; 
    color: white; 
    line-height:20px; 
    position: absolute; 
    font-size: 14px; 
    width: 29px; 
    border-right: 1px solid white; 
    border-bottom: 1px solid white; 
    left: 10px; 
} 
</style><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script type="text/javascript"> 
var limit = 9; // <---max no of lines you want in textarea 
var textarea = document.getElementById("splitLines"); 
var spaces = textarea.getAttribute("cols"); 

textarea.onkeyup = function() { 
    var lines = textarea.value.split("\n"); 

    for (var i = 0; i < lines.length; i++) 
    { 
     if (lines[i].length <= spaces) continue; 
     var j = 0; 

     var space = spaces; 

    while (j++ <= spaces) 
    { 
     if (lines[i].charAt(j) === " ") space = j; 
    } 
    lines[i + 1] = lines[i].substring(space + 1) + (lines[i + 1] || ""); 
    lines[i] = lines[i].substring(0, space); 
    } 
if(lines.length>limit) 
{ 
    textarea.style.color = 'red'; 
    setTimeout(function(){ 
     textarea.style.color = ''; 
    },500); 
}  
    textarea.value = lines.slice(0, limit).join("\n"); 
}; 
</script> 
</head> 
<body> 
<div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10</div><textarea rows="10" cols="50" id="splitLines" onpaste="return false;"></textarea> 
</body> 
</html>

Quelle

2016-07-22 Anonymous

Also, was Problem auftreten Sie genau? Fehlermeldungen? Seltsames Verhalten? Sie sollten Ihre Frage bearbeiten, um dies zu verdeutlichen. – Danieboy

Ist dies alles in einem '' und '' Tag? JSFiddle macht das automatisch für Sie, aber Sie müssen es selbst auf Ihrer eigenen HTML-Seite tun. –

@Danieboy Ich gebe es jetzt, danke für die Benachrichtigung an mich –

Das Problem ist, dass in JSFiddle, können Sie die Option "Load Type" haben auf "onload" unter den JavaScript-Optionen.

In Ihrem Code, jedoch läuft der JavaScript unmittelbar vor dem HTML — dies den Fehler verursachen wird (und das ist, was ich bekommen, wenn es als eigenständige HTML-Seite ausgeführt wird):

Uncaught TypeError: Cannot read property 'getAttribute' of null

Es gibt zwei Lösungen:

Verschieben der <script>-Tags an das Ende des <body>-Tag. Zum Beispiel:

<body> 
    <!-- all your visible HTML elements --> 
    <script> 
     // all your JS code 
    </script> 
</body>

Encapsulating alle JavaScript in einer window.onload Funktion oder eine $(function() {}) (zur Verwendung mit jQuery). Zum Beispiel:
```
<script> 
    window.onload = function() { 
     // all your JS code 
    }; 
</script> 
```

Quelle

2016-07-22 17:50:00

-Code in jsfiddle funktioniert aber nicht in HTML-Seite

Antwort

Verwandte Themen