Хочу сделать обрезание текста на определенное количество символов и добавление в конце "..." (если теста больше чем задано для обрезания).
Если в "input" сразу ввести и задать "value" тогда работать будет, а если я сам хочу ввести, то не удается взять текст который написан на данный момент в "input".
Объясните что не так в коде, Спасибо!
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>12345</title>
<style>
*{margin:0;padding:0}
</style>
</head>
<body>
<div id="textShortBlock">
<input type="text" id="strId">
<input type="text" id="maxLengthId">
<label id="strResult"></label>
<input type="submit" id="strIdBtn">
</div>
<script>
var str,
maxLength,
strResult = document.getElementById('strResult'),
strIdBtn = document.getElementById('strIdBtn'),
maxLengthVal = document.getElementById('maxLengthId').value,
strVal = document.getElementById('strId').value;
function textShort(str, maxLength) {
if (str.length > maxLength) {
return str.slice(0, maxLength) + '...';
}
return str;
}
strIdBtn.onclick = function() {
strResult.innerHTML = textShort(strVal, maxLengthVal);
}
</script>
</body>
</html>