I would like to get the content of my textarea when onkeyup event triggered.
I tried this:
<textarea onkeyup="getContent(this)"></textarea>
function getContent(txtBeschreibung) {
console.log(
txtBeschreibung.val()
)
}
but my output is this:
TypeError: txtBeschreibung.val is not a function. (In 'txtBeschreibung.val()', 'txtBeschreibung.val' is undefined)
Where is my mistake? :/
I was able to get your code to run with minor modifications
function getContent(txtBeschreibung) {
let val = $(txtBeschreibung).val();
console.log(val);
}
It looks like you need to wrap the reference (this) in a dollar-sign to perform jQuery operations on it.
txtBeschreibung isn't a jQuery object, to use jQuery, you could do this
function getContent(txtBeschreibung) {
console.log($(txtBeschreibung).val());
}
or in Vanilla JS:
function getContent(txtBeschreibung) {
console.log(txtBeschreibung.value);
}
Related
I am using Kotlin's html library kotlinx.html for dynamic html building.
I want to create a button which triggers a function when clicked. This is my current code:
class TempStackOverflow(): Template<FlowContent> {
var counter: Int = 1
override fun FlowContent.apply() {
div {
button(type = ButtonType.button) {
onClick = "${clicked()}"
}
}
}
fun clicked() {
counter++
}
}
This results in the following source code:
<button type="button" onclick="kotlin.Unit">testkotlin.Unit</button>
Which gives this error when clicked (from Chrome developer console):
Uncaught ReferenceError: kotlin is not defined at HTMLButtonElement.onclick
I have tried several approves, and search for a solution - but could not find the proper documentation.
I am not a Kotlin expert, but it's perfectly possible to write event handlers using kotlinx. Rather than:
onClick = "${clicked()}"
have you tried using this?
onClickFunction = { clicked() }
If you really need a bit on Javascript here, you can type this:
unsafe {
+"<button onClick = console.log('!')>Test</button>"
}
Good for debugging and tests, but not very nice for production code.
Unfortunately, you're completely missing the point of the kotlinx.html library. It can only render HTML for you, it's not supposed to be dynamic kotlin->js bridge, like Vaadin or GWT. So, you just set result of clicked function converted to String to onClick button's property, which is effective kotlin.Unit, because kotlin.Unit is default return value of a function if you not specify another type directly.
fun clicked() {
counter++
}
is the same as
fun clicked():Unit {
counter++
}
and same as
fun clicked():Kotlin.Unit {
counter++
}
So, when you set "${clicked()}" to some property it actually exec function (your counter is incremented here) and return Koltin.Unit value, which is becomes "Kotlin.Unit" string when it rendered inside "${}" template
Basically when running addEventListener I cannot access any of my saved variables from outside the function I am creating.
In the following code I always get the error Property 'xAxisLabel' does not exist on type 'HTMLElement'.
xAxisLabel:string = 'xAxis';
xAxisField:HTMLElement;
filterChanged(element: HTMLElement) {
element.addEventListener("change", function(){
this.xAxisLabel = 'Countries';
});
}
ngOnInit() {
this.xAxisField=document.getElementById('xAxisField');
this.filterChanged(this.xAxisField);
}
I am sure it's a fairly simple solution but I haven't been able to find it online. Any help would be appreciated.
It is due to 'this' keyword binding. You need to change your code to use arrow function, so:
filterChanged(element: HTMLElement) {
element.addEventListener("change", () => {
this.xAxisLabel = 'Countries';
});
}
now this.xAxisLabel refers to correct value
link:http://jsfiddle.net/KM9bK/1/
$('.comprejuntoproduto input:checkbox').on('click', function (e) {
if ($('.comprejuntoproduto input:checkbox').is(':checked')) {
$(".comprejuntoproduto").addClass("changeborder");
}else{
$(".comprejuntoproduto").parent().removeClass("changeborder");
}
});
I want when .compreprodutojunto input:checkbox is checked, change the .compreprodutojunto border style.
Thanks so much
First, you need to actually include the jQuery library if you're going to use jQuery (not sure if this was a fiddle-only issue or not). If you didn't include jQuery in your actual page outside of jsFiddle, you'd do it like this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
(Note, you can download your own copy if you prefer to host it yourself, or call it directly from code.jquery.com)
Also, when you call .removeClass() you can simply call it on the element that you had previously called .addClass() on, in this case <div class="comprejuntoproduto">.
See: http://jsfiddle.net/KM9bK/7/
$('.comprejuntoproduto input:checkbox').on('click', function (e) {
if ($(this).is(':checked')) {
$(".comprejuntoproduto").addClass("changeborder");
} else {
$(".comprejuntoproduto").removeClass("changeborder");
}
});
I have an element in "this" how do i get its id's value (and class's value)?
alert(this.id) ;
returns undefined.
First of all you should check if this is really your target element and not global window object. Let me illustrate my advice:
function foo() {
if (this === window) {
alert("'this' is actually 'window'");
} else {
alert("'this' is not 'window'");
}
}
foo(); // will alert: 'this' is actually 'window'
but:
document.onclick = foo;
// every mouse click will produce alert: 'this' is not 'window'
Anyway, I'd suggest you to use Firebug/Chrome console to inspect the real value of this object:
console.log(this); // will reveal you the real nature of _this_ ;-)
Probable duplicate for this.
You need to send the ID as the function parameters. Do it like this:
<button id="1" onClick="reply_click(this.id)">B1</button>
<button id="2" onClick="reply_click(this.id)">B2</button>
<button id="3" onClick="reply_click(this.id)">B3</button>
<script type="text/javascript">
function reply_click(clicked_id)
{
alert(clicked_id);
}
</script>
This will send the ID this.id as clicked_id which you can use in your function. See it in action here.
I have a strange conflict in my code.
I have a function that called from body onload:
var someGlobalVar=new SpecialType();
function OnBodyLoad()
{
someGlobalVar.Bind();
}
But when I include jQuery 1.4.2 in my project I get an error that someGlobalVar is undefined.
Why is the global variable undefined now, and what ways are there to fix it?
Unless you need to use <body onload='OnBodyLoad()'> anymore, you can change thise to use jQuery's document.ready (and move it to an external file!) like this:
var someGlobalVar=new SpecialType();
$(OnBodyLoad);
//or..
$(function() {
//other stuff..
OnBodyLoad();
});
//or...
$(document).ready(function() {
//other stuff..
OnBodyLoad();
});
Why don't you use jQuery's load event?
$(window).load(function() {
functiontoexecute();
});
It is simple, and it is easy.
Just a side note.
// DOM Ready
$(document).ready(function() {});
// When the page has completely loaded
<body onload="someFunction()">
Perhaps jQuery interferes with SpecialType and so the call to new SpecialType(); results in the variable someGlobalVar being undefined.
Try using the console to check for any warnings, and try to instantiate a SpecialType object manually. This should give you some insight.