0
I’m developing my first App using Ionic 3, and since I don’t have much experience in Typescript, I added jQuery to the project to perform functions such as enabling and disabling a textarea, or showing some element as well... I have a page where I need to get the value of characters typed in the textarea, being equal to or greater than 1, display the NEXT button...
list ts.
ngAfterViewInit() {
$(document).ready(function() {
$('.next').hide();
$(function() {
$('.text-input').on('keyup', function(event) {
if (event.currentTarget.value.length >= 1) {
$('.next').show();
} else {
$('.next').hide();
}
});
});
$(function() {
$('.checkbox').on('click', function() {
$('.text-input').toggleClass('checked').prop('disabled', function(i, v) { return !v; });
if ($('.text-input').hasClass('checked')) {
$('.text-input').val('Sem móveis para desmontar.');
$('.next').show();
} else {
$('.text-input').val('');
$('.next').hide();
}
});
});
});
}
the problem is that, the textarea field returns the type Htmlelement that does not contain property . value, returning the error Property 'value' does not exist on type 'Htmlelement'. I searched the forum and saw that we can solve this problem using this method
var txtInput = (<HTMLInputElement>document.getElementById('.text-input')).value;
but I am not succeeding in applying it, in the form below generates me the following error: Uncaught (in Promise): Typeerror: Cannot read Property 'value' of null Typeerror: Cannot read Property 'value' of null
ngAfterViewInit() {
var txtInput = (<HTMLInputElement>document.getElementById('.text-input')).value;
$(document).ready(function() {
$('.next').hide();
$(function() {
$('.text-input').on('keyup', function(event) {
if (event.txtInput.length >= 1) {
$('.next').show();
} else {
$('.next').hide();
}
});
});
$(function() {
$('.checkbox').on('click', function() {
$('.text-input').toggleClass('checked').prop('disabled', function(i, v) { return !v; });
if ($('.text-input').hasClass('checked')) {
$('.text-input').val('Sem móveis para desmontar.');
$('.next').show();
} else {
$('.text-input').val('');
$('.next').hide();
}
});
});
});
}
Could you give me some tips on how to solve this mistake? I’d like to thank you!
Good morning, I appreciate the help! the element is located by the same class, in any case the code would look like this? as I the correct position of the element in the class?
var txtInput = (<HTMLInputElement>document.getElementsByClassName('.text-input')[index]).value;
– Miguel Campos
@Miguelcampos if you want to use "native" methods (from
document
), asgetElementById
,getElementsByClassName
andgetElementsByTagName
; you just need to put the names, don’t need the "rules of query" (place#
,.
, etc..).– Gustavo Sampaio
understood, on this page then the position of the array is 0 same, we solved one of the errors, but now it is returning me
ERROR TypeError: event is not a function
 at HTMLTextAreaElement.<anonymous>
– Miguel Campos
The error is on the same line?
– Sam
I’m having a different error @Sam apparently I’m having trouble converting the type, returns me the following error
Type 'HTMLCollectionOf<Element>' cannot be converted to type 'HTMLInputElement'
on the linevar inputFields = document.getElementsByClassName('text-input') as HTMLInputElement;
– Miguel Campos
It’s just that I don’t understand these technologies you’re using, only JS.
– Sam
@Miguelcampos you’re trying to use one
HTMLCollection
, as an element<input>
. First, you forgot to set an index to pick a specific "list" element; second, iftext-input
is a<textarea>
, so I guess instead ofHTMLInputElement
, you should putHTMLTextAreaElement
; and third, I think it would be better to open up new questions to the new mistakes you are getting, because I think it is not appropriate to stay answering here in the comments.– Gustavo Sampaio