Hi I am trying to call the namespace JavaScript which is given in the internal JavaScript in below HTML representation.
<head>
<script type="text/javascript">
var ns = {
sampleAlert : function() {
ns.message(var );
}
message :function(var ) {
alert('msg');
}
}
</script>
</head>
<body>
<!--how to call the function sampleAlert-->
</body>
Is that possible? I am not able to call that namespace JavaScript function in the body.
Call it like this:
ns.sampleAlert();
Read this link to have more understanding on JavaScript Namespace
You probably need to do something like the following.
<head>
<script type="text/javascript">
var ns = {
sampleAlert : function(messageText) {
ns.message(messageText);
},
message : function(text) {
alert('msg ' + text);
}
}
</script>
</head>
<body>
<!--how to call the function sampleAlert-->
<script type="text/javascript">
ns.sampleAlert("this text will be displayed in the alert");
</script>
</body>
Related
This is the code that I want to work out, it's about AMap.com geolocation API. I want to know how to get this value (such as gLats in code) out of the function onComplete().
<!DOCTYPE html>
<html>
<head>
<title>amap</title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=key"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id='container'></div>
<div id="tip"></div>
<div id="text"></div>
<div id="txt"></div>
<script type="text/javascript">
var map, geolocation;
map = new AMap.Map("", {
resizeEnable: true
});
map.plugin('AMap.Geolocation', function() {
geolocation = new AMap.Geolocation({
});
map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete);
AMap.event.addListener(geolocation, 'error', onError);
});
function onComplete(data) {
var str=['succsee'];
var gLngs=data.position.getLng();
var gLats=data.position.getLat();
str.push('longitude：' + data.position.getLng());
str.push('latitude：' + data.position.getLat());
document.getElementById('tip').innerHTML = str.join('<br>');
document.getElementById('text').innerHTML = str.join('<br>');
}
function onError(data) {
document.getElementById('tip').innerHTML = 'failure';
}
</script>
</body>
</html>
As I can see, you are already accessing the needed values in onComplete():
str.push('longitude：' + data.position.getLng());
str.push('latitude：' + data.position.getLat());
You cannot simply get them, onComplete is a callback that is called when the values are available. So do anything about them in onComplete, you may want to assingn them to global variables, etc, to have them easyly accessible from anywhere in code.
Assigning them to globals is the way to go.
//declare in the global scope
var gLats = null;
var gLngs = null;
...
function onComplete(data)
{
var str=['success'];
gLats=data.position.getLat();
gLngs=data.position.getLng();
...
}
I am trying to implement module pattern in my code according to some examples online, what I am trying to achieve is to simply bind a button click event in my html to a function (which is not working), below is my HTML:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<input type="button" id="btn-msg" value="click me"/>
</body>
</html>
and here is my JS:
//CRUD Start
var Rutherford = Rutherford || {};
Rutherford.crud = function() {
function _readLists() {
alert("am here");
}
return {
readLists: _readLists
}
}
Rutherford.Initiate = function() {
$("#btn-msg").click(Rutherford.crud.readLists);
}
$(function() {
Rutherford.Initiate();
});
Here is as well a link to my plunker: http://plnkr.co/edit/tA94lzMPHkUOr8QuyJK8?p=preview
All what am trying to achieve is to bind the button to the function.
You need to call the anonymous function, not assign it. See the () below:
Rutherford.crud = (function() {
function _readLists() {
alert("am here");
}
return {
readLists: _readLists
}
}());
Here's an updated plunkr with this change: http://plnkr.co/edit/uiWHmtkMFEKywvFRk6DF?p=info
I believe that Evan Knowles wanted to say this:
//CRUD Start
var Rutherford = Rutherford || {};
Rutherford.crud = (function() {
function _readLists() {
alert("am here");
}
return {
readLists: _readLists
}
})( );
Rutherford.Initiate = function() {
$("#btn-msg").click(Rutherford.crud.readLists);
}
$(function() {
Rutherford.Initiate();
});
This would work properly if you can use Rutherford as a Singleton.
I don't see why I would get this, code below:
<head>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js" type="text/javascript"></script>
<script>
var json1 = {
text: "After first paragraph"
};
var first_content_added = false;
$(function() {
$(".learn-more").on("click", function() {
$.getJSON("json_info.json", function(data) {
appendContentToFirstP(data.reviews[0].about.moreinfo);
});
});
});
function appendContentToFirstP(content) {
if (first_content_added) {
return;
}
var after_first_p = $('<p class="more-info" />');
after_first_p.text(content);
$(".first").append(after_first_p);
first_content_added = true;
}
</script>
</head>
What would be causing the error?
My initial thought is the error is because I have not imported JQuery, but I have. It's inside the script tag at the top.
You haven't included jQuery, you've only included the plugin jQuery.color.
Reference it before jQuery.color:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
write before that color js like this
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js" type="text/javascript"></script>
i tried to pop an alert when clicked on a div , didn't really succeed , i messed it a little to practice with objects.
here is the the code :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var mine = {
var start = {
modeBox : function(){
alert();
}
}
}
</script>
</head>
<body>
<div id="askMode" onclick="mine.start.modeBox();">My mine</div>
</body>
</html>
the problem : not alerting
why i don't get alert when i click on the div?
live example : http://jsfiddle.net/YqP93/
The following code tested in Firefox and Chrome:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var mine = {
start: {
modeBox : function(){
alert('Test');
}
}
}
</script>
</head>
<body>
<div id="askMode" onclick="mine.start.modeBox();">My mine</div>
</body>
</html>
NOTE: the code you posted in jsfiddle is not working, but you can copy and paste the code above that works in browsers mentioned.
this.mine = {
start: {
modeBox : function(){
alert();
}
}
you are trying to declare a var in an object literal. I don't think this is valid js for one but more importantly you can not get at vars declared in that scope. You have to assign the property to the object. You had it right with the modeBox.
Get rid of the var deceleration (why?):
mine = {
start: {
modeBox: function() {
alert();
}
}
};
Demo: http://jsfiddle.net/YqP93/3/
try this
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var mine = {
start: {
modeBox: function(){
alert();
}
}
}
</script>
</head>
<body>
<div id="askMode" onclick="mine.start.modeBox();">My mine</div>
</body>
</html>
I want to do display time-changing data on a web page. I use the JQuery framework. I use the following code as a test : display a different random number each second. It does not work. Why ? What is a correct, working way ?
<html>
<head>
<title>test</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function refreshRandomNumber() {
var lHtmlBlob = "<p> random = " + Math.random() + "</p>";
$('#random_number').html(lHtmlBlob);
}
setInterval(refreshRandomNumber(), 1000);
});
</script>
</head>
<body>
<div id="random_number"></div>
</body>
</html>
You need to pass setInterval just the function referenced by refreshRandomNumber and not the return value of that function what you do by using refreshRandomNumber(). So try this:
setInterval(refreshRandomNumber, 1000);
Small difference. instead of:
setInterval(refreshRandomNumber(), 1000);
use:
setInterval(refreshRandomNumber, 1000);
That passes the function rather than the function return value.