This plunker shows a google map.
http://plnkr.co/edit/BfYggKO8nDolhmpq92dq?p=preview
<!DOCTYPE html>
<html ng-app="ngMap">
<head>
<title>Simle Map</title>
<meta name="description" content="Simple Map">
<meta name="keywords" content="ng-map,AngularJS,center">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
</head>
<body>
<ng-map center="[40.74, -74.18]"></ng-map>
</body>
</html>
I would like to know the coordinates of specific points on the map. If the user right-click on the mouse button on any points on the map, an alert will appear showing the coordinates.
The code uses angularjs and the ng-map module. http://ngmap.github.io/
I think you should add an event listener and then show the coordinates inside that event like this:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Simle Map</title>
<meta name="description" content="Simple Map">
<meta name="keywords" content="ng-map,AngularJS,center">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script>
var app = angular.module('myApp', ['ngMap']);
app.controller('EventDomListenerController', function($window) {
var vm = this;
vm.showAlert = function(event, args) {
$window.alert(event.latLng.lat()+', '+event.latLng.lng());
}
});
</script>
</head>
<body ng-controller="EventDomListenerController as vm">
<ng-map center="[40.74, -74.18]" on-click="vm.showAlert()"></ng-map>
</body>
</html>
Live Plunker
Related
I have an HTML file linked to a script. A button defined in the HTML has an onclick function 'incrementLabel()' but the function in the script throws the warning:
'incrementLabel' is declared but its value is never read.
function incrementLabel() {
var text = document.getElementById("testLabel").textContent;
document.getElementById("testLabel").innerText = (parseInt(text) + 1);
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="js/Main.js"></script>
<title>Test Web App</title>
</head>
<body>
<button onclick="incrementLabel()">Test</button>
<label id="testLabel">0</label>
</body>
</html>
I can't find any solutions to the problem other than writing the function in a in HTML. Any help would be much appreciated.
Thanks!
<!DOCTYPE HTML>
<script>
function incrementLabel() {
var text = document.getElementById("testLabel").textContent;
document.getElementById("testLabel").innerText = (parseInt(text) + 1);
}
</script>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="js/Main.js"></script>
<title>Test Web App</title>
</head>
<body>
<button onclick="incrementLabel()">Test</button>
<label id="testLabel">0</label>
</body>
</html>
This works perfectly fine. Check if you are importing your JS script correctly.
You can put the javascript code into a before the closing tag .
HTML:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="js/Main.js"></script>
<title>Test Web App</title>
</head>
<body>
<button onclick="incrementLabel()">Test</button>
<label id="testLabel">0</label>
<script>
function incrementLabel() {
var text = document.getElementById("testLabel").textContent;
document.getElementById("testLabel").innerText = (parseInt(text) + 1);
}
</script>
</body>
Some of online tools like https://playcode.io don't recognise your code but I have tested in vscode and works fine.
Maybe have to use other online tool or can test if you have imported the code well with a console.log("Works fine") into your javascript file.
Sorry for my english.
Example:
Code that works and displays google translate toolbar:
<!doctype html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'pl'
}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</head>
<body>
<div id="google_translate_element"></div>
</body>
</html>
Code that does not display google translate toolbar:
<!doctype html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.3.0/prototype.js"></script>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'pl'
}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</head>
<body>
<div id="google_translate_element"></div>
</body>
</html>
The difference: adding prototype.js.
Error in the console:
enter image description here
What should I do for the google translate element to work with the prototype.js?
I would like to add that about 3 months ago everything was working fine.
There is a possibility that you are hit with the same conflict that happens on Google Maps Javascript API.
Try my answer on this question
https://stackoverflow.com/a/50594159/341491
$(function(){
$('#alias').keyup(function(){
$('#youtuber').html($('#alias').val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="width=device-width">
<title>Julius extension</title>
<script src="jquery.min.js"></script>
<script src="popup.js"></script>
<style>
body{
width: 300px;
}
</style>
</head>
<body>
<h3>Find your YouTuber: <span id="youtuber"></span> </h3>
<input id="alias" placeholder="Search your youtuber"/>
</body>
</html>
I am trying to code a simple chrome extension. Right now I want that everything I write in the search bar of my template gets displayed above, after the "Find your YouTuber:" text.
However, for some reason that is not the case, I get the error message: popup.js:1 (anonymous function), whilst running the extension.
popuph.html :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="width=device-width">
<title>Julius extension</title>
<script src="jquery.min.js"></script>
<script src="popup.js"></script>
<style>
body{
width: 300px;
}
</style>
</head>
<body>
<h3>Find your YouTuber: <span id="youtuber"></span> </h3>
<input id="alias" placeholder="Search your youtuber"/>
</body>
</html>
popup.js:
$(function () {
$('#alias').keyup(function () {
$('#youtuber').html($('#alias').val());
});
});
I have an html file and I want to grab the text that is entered in the input field using javascript. I have tried a few different ways but nothing seems to be working properly. Here is the code that I have right now.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<input type="text" id="searchingterm">
<form>
<input type="text" id="search">
</form>
<script>
$(document).ready(function(){
var searched = document.getElementById("search").value;
console.log(searched)
})
</script>
</body>
</html>
i also tried using jquery but that didnt do anything either.
basically, the problem is that you are not assigning anything to that input and also you dont have a function to trigger the search.
your code was right, you just needed to change it a little bit.
function search() {
var searched = document.getElementById("search").value;
console.log(searched)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<form>
<input type="text" id="search">
</form>
<button onclick="search()"> search</button>
</body>
</html>
here having the script on the body
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<form>
<input type="text" id="search">
</form>
<button onclick="search()"> search</button>
<script>
function search() {
var searched = document.getElementById("search").value;
console.log(searched)
}
</script>
</body>
</html>
I'am new to jQuery and cant seem to get it to work on my computer locally. I have saved the code from production jQuery 2.1.1 as jquery.min.js . But when I try to use jquery in projects it does not work. If I click on the jquery.min.js file that I saved, it gives up a Microsoft Script Error of "'default view' is null or not an object". I have been using this code to see if jQuery was installed. Any Ideas?
<!doctype html>
<html>
<head>
<title>Learning jQuery</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="jquery.min.js"></script>
</head>
<body>
<script>
if (typeof jQuery != "undefined") {
alert('jQuery is installed!');
</script>
</body>
</html>
You are missing the closing curly brace for your IF statement.
<!doctype html>
<html>
<head>
<title>Learning jQuery</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="jquery.min.js"></script>
</head>
<body>
<script>
if (typeof jQuery != "undefined") {
alert('jQuery is installed!');
} // <---- Right here!
</script>
</body>
</html>
try using jQuery from CDN to check the problem [source : http://jquery.com/download/]
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
other way to include it is like this : http://www.w3schools.com/jquery/jquery_install.asp
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Also there is closing braces missing in the code
<!doctype html>
<html>
<head>
<title>Learning jQuery</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="jquery.min.js"></script>
</head>
<body>
<script>
if (typeof jQuery != "undefined") {
alert('jQuery is installed!');
}//** <--------here is the missing closing braces **
</script>
</body>
</html>
I have made some chnages to your code ,please check it
1.closed the curly bracket.
2.changed the min file.
I think the major error is in syntax,because you have not closed the curly bracket of if conditions.
<!doctype html>
<html>
<head>
<title>Learning jQuery</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<script>
if (typeof jQuery != "undefined") {
alert('jQuery is installed!');
}
</script>
</body>
</html>