Develop Reference

javascript set variable from .text method

I'm new in javascript development and I want to ask how to set variable from text method.
Example: in this code have a text method
$('.phone').text(theRestaurant.phone);
$('.location').text(theRestaurant.location);
$('.info').text(theRestaurant.info);
in the Html file, when I create any class from these will print the value from JSON file.
Example :
<div class='phone'></div>
Output: (000)000-9999
source code:
<div class='phone'>(000)000-9999</div>
I try to set this in variable but it doesn't work.
My try:
var phone = theRestaurant.phone
I want to set it in variable because I need to put it inside href value like so:
<script>
var phone = 'tel:' + phone
document.getElementById("phone").href = phone;
</script>
I hope everything clear. and If have an other solution please tell about it.
Thanks

Have you wrapped your jQuery code in a document.ready() wrapper?
If not, then the javascript might run before the page has had time to create the elements in the DOM, and nothing will work.
<script>
$(document).ready(function(){
//all javascript/jQuery code goes in here
});
</script>
Also, see my comment above about mixing up "ByClassName" and "ByID"

Answer came from #itsgoingdown
this code in main javascript file:
var phone=document.getElementById('phone').innerHTML; document.getElementsByClassName("phone")[0].href = phone;

JS - Dynamic Href Change

Ive tried many way but im new to JS, I mainly do PHP.
Anyway the code:
<script>
var userinput = $('input[name="imdbid"]');
userinput.change(
function(){
$('#userimdb').attr('href')+$('input[name="imdbid"]').val();
}
);
</script>
Basically, the imdbid is gotten from a input tag, basically I want to append whatever the user types to a href of a tag, This doesnt seem to work doe. When I alert() it, it seems to give me the output of what its meant to but when I remove alert() it doesnt seem to change the href, I also tried .setAttribute() but that also just did nothing.
Please help me out im going insane right now.

Try this:
You need to assign it to href attribute..
var userimdb=$('#userimdb');
var baseURL=userimdb.attr('href');
$('input[name="imdbid"]').change(function()
{
var userimdb=$('#userimdb');
userimdb.attr('href', baseURL + $(this).val());
});

You're not setting the attribute right now, only accessing it. In addition, you need to store the original href attribute somewhere so you're not adding the same text repeatedly. Here's the updated code:
var userinput = $('input[name="imdbid"]');
var orighref = $('#userimdb').attr('href');
userinput.change(function(){
$('#userimdb').attr('href', orighref + userinput.val());
});

Polymer - Get data-bound attribute value in repeating template

I'm having a bit of an issue here. I had a small amount of success with event.target.templateInstance.model.thing syntax to get the value of attributes from within a repeating template but I keep getting back undefined from this bit of code I have here:
downloadFunction: function (e) {
console.log("dl function clicked");
//get particular id of thing
var fu = e.target.templateInstance.model.s.soundId;
console.log(fu);
//^ returns "TypeError: Cannot read property 'soundId' of undefined"
}
And my repeating template is here:
<div layout horizontal wrap center center-justified>
<template repeat="{{s in carddata}}">
<sound-card image="{{s.imgurl}}"
quotetext="{{s.quote}}"
soundsrc="{{s.soundurl}}"
soundref="{{s.soundId}}"
downloadfunction="{{downloadFunction}}">
</sound-card>
</template>
</div>
Where carddata is just an array with my data in it. All of the values are generated fine so I know it's not an issue with my array. I'm just confused how exactly I'm supposed to target someting from within the repeating template? Am I calling it at the wrong time? Or am I messing up the syntax of the templateInstance bit?
If it matters, I'm trying to get it to work in an Android 4.4 webView using Apache Cordova. 4.4 webView doesn't appear to enjoy the shadowDOM terribly much.
Thanks!
edit: After some jiggery pokery with console logs, it appears that the sender value is referring to the div that I apply the on-click="{{downloadFunction}} to. Here's the template that I am repeating, if this provides any insight.
<div class="soundcard-container" vertical layout>
//can't target this one either on WebView 4.4, works on ChromeOS
<img src="{{image}}" on-tap="{{playAudio}}">
<div class="soundcard-bottom-container" horizontal layout center justified>
<span>{{quotetext}}</span>
//I have an 'a' tag for desktop browsers and the div tag is targeting my Android/iOS
//apps that I am exporting as a webView to using Apache Cordova. Webonly is hidden
//at the point where I'm trying to get my downloadfunction to work.
//console.log(sender) in my downloadfunction returns this div v
<div on-tap="{{downloadfunction}}" class="mobileonly"></div>
</div>
//just a hidden audio thing for web
<div style="display: none">
<audio id="{{soundref}}" src="{{soundsrc}}" controls preload="auto"></audio>
</div>
</div>
edit2 some console logs..
console.log(sender) and console.log(event.target) are both the same div that has the on-click event for my downloadFunction.. not sure if this should be the case.
console.log(e.target.templateInstance.model) returns my <sound-card> object, I believe like it should(?)
It's just when I add the specific .s.soundId that it's undefined. I'm not sure why it's unable to find it.. Maybe there's another way to get the specific soundId (or s.soundId rather) of that particular <sound-card> object?

I'll bet you want to refer to the "sender" of the event—not e.target. See the part about inSender at https://www.polymer-project.org/0.5/docs/polymer/polymer.html#declarative-event-mapping:
inSender: A reference to the node that declared the handler. This is
often different from inEvent.target (the lowest node that received the
event) and inEvent.currentTarget (the component processing the event),
so Polymer provides it directly.
This might fix it:
downloadFunction: function (e, detail, sender) {
console.log("dl function clicked");
//get particular id of thing
var fu = sender.templateInstance.model.s.soundId;
console.log(fu);
}

Alright I was able to fit this in a different way. I wasn't able to get e.target.templateInstance.model.s.soundId bit to work, so instead on the div that I call the event on (event.target) I gave it an attribute called data-soundid and passed it {{soundref}} from my original template and then where I repeat that template I simply made a function like so:
downloady: function (e) {
console.log(e.target.getAttribute('data-soundurl'));
}
Ta da! Very nice solution. Thanks to Eyal who suggested this to me in a previous question. It works like a charm. :-)

Here is working example of using templateInstance, with included selecting by dynamic ID: Plunk .
As for your code, can't tell why it's not working.
handleEvent: function(e, detail, sender) {
console.log('handleEvent');
console.log(sender.id);
//How to catch full_obj here,
//..as if first item is clicked: full_obj = {"firstName":"John", "lastName":"Doe"}
//console.log(e);
console.log(e.target.templateInstance.model.item.firstName);
//console.log(detail);
//console.log(sender);
this.instance_firstName = e.target.templateInstance.model.item.firstName;
this.instance_lastName = e.target.templateInstance.model.item.lastName;
//Selecting by dynamic ID
var clicked_element = this.shadowRoot.querySelector('#'+this.instance_firstName);
console.log('Selecting');
console.log(clicked_element);
//var second_element = sender.templateInstance.model.querySelector('my-second-element');
//var second_element = this.$.second_element;
}
Edit:
Event handling and data binding Docs

jquery body on hover cannot target other DIVS

I am trying to access my own javascript function from within a:
$("body").on("mouseenter",".noteNode",function(){});
The trouble seems to be that when I am inside the function above jQuery will not allow me to get access to other elements?
Let me elaborate further:
Actual code I want to use I've jsfiddled: http://jsfiddle.net/uJ2Yb/8/
I believe the function is being called as I had wanted it to be, but as you can see $(this) is not able to target the actual div which is being hovered, and so when trying to pass this data to the other function it just doesn't arrive - why is this? I believe it's a scope problem but I have tried a few ways to solve it and searched S.O without much luck yet.
The reason I need to use $("body").on is because I am creating the DIV's (which will be hovered) on the fly with JS.
As you can see the hover function is working fine and firing as it should do, but totally unable to access anything in the DOM which I don't understand
.
[Edit] so to clarify: http://jsfiddle.net/uJ2Yb/8/
I am trying to pass the ID of the DIV (which was created BY JS) over to my own function in which i want to try and access the DIVs offset parameter - but i am unable to do so, you will see in my revised fiddle that i am just getting 'undefined' in my alert box which is not what i wanted - i am still convinced that this is because of a scope issue.

try this updated fiddle: http://jsfiddle.net/uJ2Yb/7/
function myFunction(someVar){ alert(someVar); }
$("body").on("mouseenter",".noteNode",function(event){
myFunction(event.target.innerHTML );
//alert( event.target.innerHTML );
});

Please Assign Unique Id To Your Divs
try This Code
function myFunction(someVar){ alert(someVar); }
$(document).ready(function(){
$("body").append('<div class="noteNode" id="a">Note Node</div>');
$("body").append('<div class="noteNode" id="b">Note Node</div>');
$("body").append('<div class="noteNode" id="c">Note Node</div>');
});
$("body").on("mouseenter",".noteNode",function(){
myFunction( $(this).attr("id") );
alert( $(this).attr("id") );
});

Javascript id question

I have a beginner question. I have a shoutbox, an Ajax shoutbox.
I made a form where i can update the users depending on them being a DJ or not.
If that option is selected then a small image appears after the user's name.
Is working but I can't make it work but my problem is, that if I set it on my profile, it adds the image to everybody's name.
Here is my code:
var radios = document.getElementById("radios");
if(radios.innerHTML == 'yes') {
radios = "<img src='http://www.site/pic/radios.gif'>";
}
My question is: How to insert the current user's id in this if statement?

In the code sample you've included, there appears to be an error.
With this line of code:
var radios = document.getElementById("radios");
you get the DOM object that has an id="radios". Then, you try to set that same variable to be a piece of HTML:
radios = "<img src='http://site/pic/radios.gif'>";
That won't accomplish anything other than setting a variable that you were previously using to store a DOM object to now be a string. That line of code does not modify the DOM in any way. Did you mean to write it this way?
radios.innerHTML = "<img src='http://site/pic/radios.gif'>";