Setting title attribute with Javascript function - javascript

I am trying to find, if I can pass a value on the title attribute of a label element using Javascript?
I have tried the following Javascript code:
function myFunction()
{
return "Hello!";
}
And a piece of HTML code:
<label title="myFunction()">TEST</label>
But, this isn't working. It just show the 'myFunction()' as a text.
Is it possible, what I am trying to do? If yes, what is the correct syntax?

<label id='mylabel'>TEST</label>
<script>
function myFunction() {
return "Hello!";
}
document.getElementById('mylabel').setAttribute('title', myFunction());
</script>
Should do the job. It first selects the label and then sets the attribute.

You can't inline javascript like this.
What you may do is
1) give an id to your label and put this at the end of your body
<script>
document.getElementById('myId').title = myFunction();
</script>
Demonstration
2) if you really want to inline the call, write this at the point where you want your label :
<script>
document.write('<label title="'+myFunction()+'">TEST</label>');
</script>
(this is really not recommended)

Try this way:-
HTML:
<label id="lab">TEST</label>​
JS:
window.onload = function() {
document.getElementById('lab').setAttribute('title','mytitle');
alert(document.getElementById('lab').title);
}​
Refer LIVE DEMO

I got this! If you are using angular you can use this data Binding and call the function
<label title="{{myFunction()}}">TEST</label>

Related

Using input value in a javascript function

I want to use a value of a hidden input field in my javascript function. I'm kind of a javascript noob, so I don't know how to use it yet. Now I have two seperate javascript codes which I want to combine.
My HTML: <input type="hidden" id="frequentie_x" value="{$profile.x}"/>
My first JS code to get the value of the id frequentie_x:
<script>
function frequentie() {
window.frequentie =
document.getElementById("frequentie_x").value;
}
</script>
And my second JS code which I need for displaying the correct radiobutton on my page:
<script>
$(function () { $('input[value="(Here goes the value of input field hidden"]').filter(':visible:first').prop('checked', true)} );
</script>
Does anyone know how to combine these two into one script to use the value of my hidden input value in the second script? Or maybe an easier way to do this of course.
Edit:
I tested the following code and it works to show the variable input value that is loaded from a database to show in the p element with id result:
<script type="text/javascript">
function myFunction() {
var frequentie = document.getElementById("frequentie").value;
document.getElementById("result").innerHTML = frequentie;
}
$(function () { $('input[value="Dagelijks"]').filter(':visible:first').prop('checked', true)} );
</script>
<p id="result"></p>
Now all I need is to use the var frequentie in this part: $('input[value="Dagelijks"]'). Does anyone know how to use the var frequentie from funtion myFunction() here?

clear dom cache of jquery element?

I have an jQuery element $foo
it contain html with a textarea. But if I change the value of textarea and use $foo.html() after this change, the html result is not actualized...
(bad) exemple : http://jsfiddle.net/sNYYD/781/
var $foo = $('#foo'); console.log($foo.html());
$foo.on('keyup', function(){console.log($foo.html());});
how remove or disabled jquery dom cache?
EDIT EXEMPLE ======================================================
I do a simple exemple, but the answer go on bad way, sry about that, my use case is more specefic and looks like this :
http://jsfiddle.net/sNYYD/790/
I need know how found good key to delete in $.cache for my element, to actualise html of element in my global var.
You need to access the actual textarea's value:
var $foo = $('#foo');
console.log($foo.html());
$foo.on('keyup', function(){console.log($foo.find('textarea').val());});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<textarea>testing 123</textarea>
</div>
See the updated fiddle: http://jsfiddle.net/sNYYD/782/
Changing the text in the text-area doesn't affect the actual html, that is why you are always getting the same value. If you need only the text you can use one of the other solutions if however you need the whole html you have to take the value and put it into the actual html like this:
var $foo = $('#foo');
console.log($foo.html());
$foo.on('keyup', function()
{
$("#textArea").html($("#textArea").val());
console.log($foo.html());
});
UPDATE
This is the solution for your new example.
JSFiddle: http://jsfiddle.net/sNYYD/792/
Because textarea only display data via val() not ah html() . You are calling the only HTML But Textarea does not support to display the typed text content via html() function call
var $foo = $('#foo');
console.log($foo.html());
$foo.on('keyup', function() {
console.log($foo.html());
console.log($foo.find('textarea').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- By http://jquery4u.com / Sam Deering -->
<div id="foo">
<textarea>test</textarea>
</div>
Duplicate answers i would say How to get form html() via jQuery including updated value attributes?
and removing or disabling DOM cache using jQuery is not possible i feel.
$(document).ready(function(){
$("textarea").keyup(function(){
$(this).html(console.log($(this).val()))
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<textarea>testing 123</textarea>
</div>

Uncaught ReferenceError: (field name) is not defined when setting value of a textbox

trying to set the value of a textbox when I load a page. I'm getting "Uncaught ReferenceError: test is not defined". Also tried the JQuery way that I mention in the comment and that just gets ignored. Also played around with having the value attribute in there for the input and that didn't help.
Been looking around online but not seeing anything wrong with what I'm doing. It seems like the textbox doesn't exist yet when the code runs but that shouldn't be. I can also read from the textbox with a button click fine.
HTML:
<input type="text" id="test"/>
Javascript:
<script src="/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
test.value = "5"; //also tried $( "#test").val("5");
});
</script>
You're referencing an object test which was never defined. You can fix it with:
$("#test").val("5");
You may also want to use vanilla javascript for something simple like this.
document.addEventListener("DOMContentLoaded", function() {
var el = document.getElementById("test");
el.value = "5";
});
Your second try is working fine
$("#test").val(5)
JSFIDDLE http://jsfiddle.net/vDC6X/
Do you use the right ID of the element.
You say textbox... does the textbox id render as test ?
Take a look at the page source of the rendered page.
You have not imported jquery min.js
<script src="/Scripts/jquery-1.10.2.min.js"></script>

Change text of child

I'm trying to make a add to favorite system. I have a function which alerts the proper id I want to add.
I use:
<script type="text/javascript">
function addfavo(state_name)
{
alert(state_name);
}
</script>
And in my html I have a loop (with php) which shows all the images with the add to favorite links which looks like.
<div style="margin-top:40px;">
<a onclick="addfavo('<?php echo $imgid ?>')"><b>Add to favourits</b></a>
</div>
So what happens is I have a lot of links to the same function with different parameters, but I only want the link that I click to change the text (to something like added to favorites)
Can some one help me in the right direction?
I have tried adding:
$(this).innerHTML("test");
but it didn't work.
You might want to use the html method:
$(this).html('test');
While html is a jQuery method, innerHTML is a property of a DOM element. If you were using pure JavaScript, you'd probably use:
this.innerHTML = 'test';
However, as you are using the onclick attribute on your HTML tag, this will not point to your current DOM element inside your function scope. In your case, I'd add a class to your elements, like add_favorite and add your text to another attribute:
<div style="margin-top:40px;">
<b>Add to favourits</b>
</div>
And then apply a jQuery event to it:
<script type="text/javascript">
$(function() {
$('.add-favorite').click(function(e) {
var text = $(this).data('text'); // store the text in a variable
$(this).html(text); // replace your element's html with your text
e.preventDefault();
});
});
</script>
Fiddle: http://jsfiddle.net/MH6vY/

Set paragraph text with javascript on page load

Basically all I want to do is set the text of a paragraph using JavaScript/jQuery on page load. This is for a simple Kendo UI app.
Can anyone please give me a method of doing this?
I know this is probably a noob question, but I'm semi inexperienced with JavaScript/jQuery.
This is what I've already tried, but it doesn't seem to be working...
<script type="">
$(document).ready(function () {
$("#mac001OEE").val("0%");
});
This code has been placed in the head of the HTML page.
Thanks :)
Please try .text() good read here: http://api.jquery.com/text/
demo http://jsfiddle.net/FyVzF/13/ or for your specific example using id please see here http://jsfiddle.net/FyVzF/14/
hope this helps!
code
$(document).ready(function() {
$("p").text('test test Rambo');
});
HTML
<p> </p>
Try this only for a particular paragraph with the id "idname":
$(document).ready(function() {
$("p#idname").text('test test Rambo');
});
$(document).ready(function () {
$("#mac001OEE").html("0%");
});
OR
$(document).ready(function () {
$("#mac001OEE").text("0%");
});
Instead of .val() use .text() or .html():
$(document).ready(function() {
$("p").text('saeed');
});
or
$(document).ready(function() {
$("p").html('saeed');
});
For non-input elements you should use html or text methods:
$(document).ready(function () {
$("#mac001OEE").html("0%");
});
Assuming you are trying to set the text of a p element, use text():
$("#mac001OEE").text("0%");
val() is used on elements which have a value attribute, such as input, select and textarea.

Categories