Trying to set up a simple ng-click event, and reading through other pages about it. It seems like as long as it is added to $scope it should work, but of the two examples I have put in the below page nothing works (except the preventDefault()).
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>ng-click test</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="js/DBFScube.js"></script>
</head>
<body ng-app="DBFScube" ng-controller="AppCtrl as app">
<div style="width: 100%;">
<div id="zoom-controll"><li class="full">Full-screen</li></div>
<button ng-click="$scope.alert('I am a little thing that needs to do somethign');">Click Me</button>
</div>
</body>
</html>
And the controller
var DBFScube = angular.module("DBFScube", ['ngSanitize']);
DBFScube.controller("AppCtrl", function ($sce, $scope, $http, $filter){
var app = this;
//
//$http.get("http://localhost:3000").success(function(CubeSides){
// app.CubeSides = CubeSides;
//})
$http.get("http://localhost:3000").success(function(CubeSides){
$scope.sides=CubeSides;
console.log("Loading data");
})
app.getmenuname = function(side) {
if($scope.sides === undefined) {
console.log("Not loaded fside " + side );
} else {
console.log("Got menu pane " + $scope.sides);
var fside = $filter('filter')($scope.sides, function (d) {return d.side === side;})[0];
console.log("Sending: " + fside.menuname);
return fside.menuname;
}
}
$scope.alert = function(message) { alert(message); }
$scope.growpane = function (side) {
console.log("You pressed the button, like " + side);
}
app.showpane = function (side) {
console.log("Loading side: " + side);
if($scope.sides === undefined) {
console.log("Not loaded yet");
} else {
console.log("Got page " + $scope.sides);
var fside = $filter('filter')($scope.sides, function (d) {return d.side === side;})[0];
var culine = '<iframe src="' + fside.surl + '" height="700" width="700"></iframe>';
console.log(culine);
return $sce.trustAsHtml(culine);
}
}
})
The problem is that you should not write $scope in the view. This holds true to everything you need from the controller, you never need to write $scope since you are in the scope of your defined controller.
Your issue is here:
<button ng-click="$scope.alert('I am a little thing that needs to do somethign');">Click Me</button>
Change to:
<button ng-click="alert('I am a little thing that needs to do somethign');">Click Me</button>
$scope is not necessary inside 'ng-' attribute. Try
<button ng-click="alert('I am a little thing that needs to do somethign');">Click Me</button>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>ng-click test</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="js/DBFScube.js"></script
<script>
module.angular("DBFScube").controller("AppCtrl",['$scope', function($scope){
$scope.someFun = function(){
alert('I am a little thing that needs to do somethign');
}
}]);
</script>
</head>
<body ng-app="DBFScube" ng-controller="AppCtrl">
<div style="width: 100%;">
<div id="zoom-controll"><li class="full">Full-screen</li></div>
<button ng-click="someFun()">Click Me</button>
</div>
</body>
</html>
Related
I'm Tring to get a user to chose with 2 buttons, which site will be presented in iframe tag.
Option1.html does work as default, but Option1.html & Option2.html do not work with user button.
When Clicking the buttons, I Get the default browser error "Can’t reach this page".
Please Take into account, that I a beginner with HTML and JS.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Module choose</title>
</head>
<body>
<p>Click to choose Module</p>
<button onclick="myFunction1()">Option1</button>
<script>
function myFunction1() {
document.getElementById("myframe").src = "Option1.htm";
}
</script>
<button onclick="myFunction2()">Option2</button>
<script>
function myFunction2() {
document.getElementById("myframe").src = "Option2.htm";
}
</script>
<br><br>
<iframe id="myframe" src="Option1.htm" width="1600" height="1600"></iframe>
</body>
</html>
Ok first make a folder and put this code in that and make another html document named same as given in your code...
Or see this
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Module choose</title>
</head>
<body>
<p>Click to choose Module</p>
<button onclick="myFunction1()">Option1</button>
<script>
function myFunction1() {
document.getElementById("myframe").src = "index.html";
}
</script>
<button onclick="myFunction2()">Option2</button>
<script>
function myFunction2() {
document.getElementById("myframe").src = "index2.html";
}
</script>
<br><br>
<iframe id="myframe" src="Option1.htm" width="1600" height="1600"></iframe>
</body>
</html>
This will be the main page...
And this will be inbdex.html. When user clicks option1 then this will be shown...
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Stopwatch</title>
</head>
<body>
<div>Seconds: <span id="time">0</span></div>
<input type="button" id="startTimer" value="Start Timer" onclick="start();"><br/>
<input type="button" id="stopTimer" value="Stop Timer" onclick="stop();"><br/>
<script>
var timeElapsed = 0;
var timerID = -1;
function tick() {
timeElapsed++
document.getElementById("time").innerHTML = timeElapsed;
}
function start() {
if(timerID == -1){
timerID = setInterval(tick, 1000);
}
}
function stop() {
if(timerID != -1){
clearInterval(timerID)
timerID = -1
}
}
function reset() {
stop();
timeElapsed = -1;
tick()
}
</script>
</body>
</html>
And the below thing will be index2.html. So when user clicks option2 then this will be shown!
<html>
this is other page
</html>
#(message: String)(exchangelist: java.util.ArrayList[String])(implicit session: play.mvc.Http.Session)
#main(title = message)(session) {
<head>
...
</head>
<body>
<script>
startup(exchangelist);
<script>
</body>
Code like this, how can I pass parameter "exchangelist" to Js function "startup()"? This method don't work.
I suggest trying the meta tag:
<html>
<head>
<!-- <meta name="exchangelist" content='#{exchangelist.mkstring(",")}'> -->
<meta name="exchangelist" content='yellow,black,green'>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<script>
function startup(list) {
alert("startup called with " + list);
}
var el = $('meta[name=exchangelist]').attr("content").split(",");
startup(el);
</script>
</html>
I am trying to bind my html button to a function using knockout. The function is only supposed to pop up the alert message when the button is clicked but instead, the function is executed on page load.
Here's my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type='text/javascript' src='knockout-2.2.0.js'></script>
<script type='text/javascript' src='studentapp.js'></script>
</head>
<body>
<div class="container">
<div class="new_student">
<input type="text" class="name" placeholder="name" data-bind="value: person_name, hasfocus: person_name_focus()">
<input type="text" class="age" placeholder="age" data-bind="value: person_age">
<button data-bind="click: createPerson">Create</button>
</div>
</body>
</html>
Here's my js:
function createPerson(){
alert("Name ");
};
ko.applyBindings(new createPerson());
The console is displaying the following:
Uncaught TypeError: Cannot read property 'nodeType' of null
Any ideas ?
view model should look like this
var createPerson = function(){
var self = this;
self.name = "Mike";
self.sendAlert = function(){
alert(self.name);
};
};
ko.applyBindings(new createPerson());
then your button can use
<button type="button" data-bind="click:sendAlert"></button>
Please have a look on this tutorial
Your code should looks like
var viewModel = function () {
var self = this;
self.name = "Name";
self.age = 22;
self.buttonClicked = function () {
alert(self.name + " is " + self.age + " old");
};
};
ko.applyBindings(new viewModel());
Here is working fiddle sample.
EDIT:
Fiddle was fixed, and link updated
try put defer tag in your script, and put all javascript code after </html> tag, it`s a good practice.
<script type='text/javascript' src='studentapp.js' defer="defer"></script>
I've been having trouble with my javascript code.
<!DOCTYPE html>
<html>
<head>
<title>js-game</title>
<script src="script.js" type="text/javascript"></script>
<script src="story.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="game">
<ul id="output">
<li onclick="main()">Click here to start!</li>
</ul>
<input autofocus id="inputLine" type="text">
<p onclick="" id="enterInput">ENTER</p>
</div>
</body>
</html>
// Variables
var log="<li>Hello</li>";
var lastVar="";
// Functions
function getInput() {
document.getElementById("enterInput").addEventListener("click", function() {
return document.getElementById("inputLine").value;
document.getElementById("inputline").value="";
});
}
function output(output) {
log=log + "<li>" + output + "</li>";
document.getElementById("output").innerHTML=log;
}
function main() {
output("What's your name?");
alert(getInput());
}
As you can probably see I want to get input from a <input type="text"> with the id of inputLine. And a button with the id of enterInput.
But all I get back is undefined, and I've been working on this for a long time, so I'm getting frustrated.
Sorry for bad english.
Try doing it like so:
document.getElementById("enterInput").addEventListener("click", getInput );
function getInput() {
var val = document.getElementById("inputLine").value;
//do something with val
document.getElementById("inputLine").value="";
return val;
}
See this demo
Or to fetch it as a variable with getInput():
document.getElementById("enterInput").addEventListener("click", function(event){
var val = getInput();
alert(val);
});
function getInput() {
var val = document.getElementById("inputLine").value;
document.getElementById("inputLine").value="";
return val;
}
See this demo
Thanks in advance.
Please find the following script, it alerts e.value = "yes" in fire fox and "no" chrome...
what' wrong with this code?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>new_file</title>
<script type="text/javascript">
function func(){
alert("I am at Func")
}
var i = 0;
document.write("<form style='display: block'><input name='test' id='test' value='no'></form>");
window.onload = function () {
global();
};
function global(){
var e=document.getElementById("test");
alert(e.value);
if(e.value=="no" && i == 0 ){
e.value="yes";
i = 1;
}
else {
//e.value="no";
func();
}
}
</script>
</head>
<body>
</body>
</html>
What i need is based on that e.value i need to call the func()? Any one please answer it...