Код работает в jsfiddle, но не в html-странице

Я использую код от Max lines textarea, чтобы создать текстовое поле только с 9 строками, и этот код отлично работает на моем jsfiddle, https://jsfiddle.net/cityFoeS/3j48cpzn/ Текстовое поле не будет ограничивать текстовое поле до 9 строк, как я хочу к.Код работает в jsfiddle, но не в html-странице

мой 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>

источник

2016-07-22 Anonymous

Так что проблемы вы испытываете именно? Сообщения об ошибках? Странное поведение? Вы должны изменить свой вопрос, чтобы уточнить это. – Danieboy

Это все в тегах '' и ''? JSFiddle делает это автоматически для вас, но вы должны сделать это самостоятельно на своей собственной HTML-странице. –

@ Danieboy Я положил его сейчас, спасибо, что уведомил меня –

Проблема заключается в том, что в JSFiddle, у вас есть опция "Тип нагрузки" установлен на "OnLoad" под параметры JavaScript.

В своем коде, однако, JavaScript работает непосредственно перед HTML — это вызовет ошибку (и это то, что я получаю, когда работает как автономный HTML страницы):

Uncaught TypeError: Cannot read property 'getAttribute' of null

Есть два решения:

Перемещение <script> тегов к концу <body> тега. Например:

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

Encapsulating все JavaScript в window.onload функции или $(function() {}) (для использования с JQuery). Например:
```
<script> 
    window.onload = function() { 
     // all your JS code 
    }; 
</script> 
```

источник

2016-07-22 17:50:00

Код работает в jsfiddle, но не в html-странице

ответ

Смежные вопросы