Блог

Главная - Вопросы по программированию - по какой причине функция oninput в js не работает?

по какой причине функция oninput в js не работает?

#javascript #html

Вопрос:

есть практические видео, загруженные кем-то, и я делаю шаг за шагом, что вы пишете в видео ( я имею в виду коды), но ничего нет !

используемый язык ( html и js )

 var $count = document.getElementById("count"),
    $textarea = document.getElementById("text"),
    $maxlength = $textarea.getAttribute("maxlength");

$maxlength.oninput = function () {
    $count.innerHTML = $maxlength - this.value.length;
}; 
   <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="cal.css">
    <title>cal</title>
</head>
<body>
    <form action="">
        <textarea name="text" id="text" cols="30" rows="10" maxlength="100"></textarea>
        <span id="count">100</span>
    </form>
<script src="cal.js"></script>
</body>
</html>

Комментарии:

1. не должно ли это быть $textarea.oninput вместо $maxlength.oninput?

2. Причина в том, что строки не являются EventTarget s . Ссылку на видео, пожалуйста.

Ответ №1:

Нет $maxlength , используйте $textarea для прослушивания oninput события.

 var $count = document.getElementById("count"),
    $textarea = document.getElementById("text"),
    $maxlength = $textarea.getAttribute("maxlength");

$textarea.oninput = function () {
    $count.innerHTML = $maxlength - this.value.length;
}; 
   <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="cal.css">
    <title>cal</title>
</head>
<body>
    <form action="">
        <textarea name="text" id="text" cols="30" rows="10" maxlength="100"></textarea>
        <span id="count">100</span>
    </form>
<script src="cal.js"></script>
</body>
</html>
Метки: