前提・実現したいこと
エディタ:Visual Studio Code
TypeScript学習中。静的型言語は未経験です。
javascriptで行なっていたDOM取得をTypeScriptで記述すると
エラーが発生します。 型定義の問題だと思いますがDOM取得の場合は
どのように型定義を指定したら良いかわかりません。
ご教授お願いします。
発生している問題・エラーメッセージ
javascriptでは問題なく動きます。
コード太字部分:
•number型にstringに割り当てできません。
•オブジェクトはnullである可能性があります。
該当のソースコード
textarea 内の文字数をチェックするコードです。
テキストエリア内の上限文字数:50
残り文字数が10文字切ったら赤く表示。
-----------HTMLファイル-----------
<body> <div class="container"> <textarea id="comment"placeholder="your comment here"></textarea> <div class="btn">Submit</div> <p><span id="label"></span></p></body></div> <script src="js/main.js"></script>
-----------tsファイル-----------
let comment = document.getElementById('comment');
let label = document.getElementById('label');
const LIMIT: number = 50; const WARING: number = 10; **label.innerHTML** = LIMIT; // label.innnerHTML でエラー。 //内容: number 型を stringに割り当てできません。 **comment**.addEventListener('keyup', () => { //commentでエラー //内容:オブジェクトはnullである可能性があります。 let remaining: number = LIMIT - this.value.length; label.innerHTML = remaining; label.className = remaining < WARING ? 'warning' : ''; });
-----------CSSファイル-----------
body {
font-family: Verdana, sans-serif;
font-size: 16px;
background: #e0e0e0;
}
.container {
width: 400px;
margin: 30px auto;
}
textarea {
width: 400px;
height: 200px;
box-sizing: border-box;
padding: 14px;
font-size: 16px;
border: none;
border-radius: 5px;
margin-bottom: 14px;
line-height: 1.5;
}
textarea:focus {
outline: none;
}
p {
color: #333;
font-size: 14px;
margin: 0;
padding-top: 8px;
}
.btn {
display: block;
width: 150px;
background: #00aaff;
padding: 5px;
color:#fff;
border-radius: 5px;
text-align: center;
cursor: pointer;
box-shadow: 0 4px 0 #0088cc;
float: right;
}
.warning {
color: red;
}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/17 06:03