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>
Related
Upon clicking the button it displays an alert from the input value + a custom string.
My issue is that after clicking the button and changing the input value, clicking the button again displays the old value instead of the new.
Javascript
function test() {
var message = document.getElementById("name").value;
var newMessage = message + " " + "HELLO!";
document.getElementById("send").addEventListener("click", function (e) {
e.stopImmediatePropagation();
alert(newMessage);
console.log(newMessage);
});
}
HTML
<!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">
<script src="main.js"></script>
<link rel="stylesheet" href="style.css">
<title>Greet your friend</title>
</head>
<body>
<label class="main">Enter the name of your friend you want to greet</label>
<input class="main" type="text" name="name" id="name" value="George">
<button class="main" id="send" onclick=test()>DONE</button>
</body>
</html>
You had uncountable syntax problems which I fixed them. You don't need to use stopImmediatePropagation here.
function test() {
var message = document.getElementById("name").value;
var newMessage = message + " " + "HELLO!";
// -- You don't need a new variable to apply them --
// message += " " + "HELLO!";
// -- Or this one which is better and newer. Called 'String Literals' --
// message = `${message} HELLO!`;
alert(newMessage);
console.log(newMessage);
};
<label class="main">Enter the name of your friend you want to greet</label>
<input class="main" type="text" id="name" />
<button class="main" id="send" onclick="test()">DONE</button>
#(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>
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>
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
I'm doing a schoolproject, trying to do an list of things you need to buy.
The problem is, i can't write more than one time and add to the list, and i can't figure out why.
(It's nowhere near done.) (i have to diffrent javascript files)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="main.css" type="text/css" rel="stylesheet">
<title>Inköpslista</title>
</head>
<body>
<div id="kol1" class="kol">
<h1>Inköp</h1>
<input type="image" src="img/button.png" alt="Submit" id="storknapp" onclick="klickaKnapp('skriva')"/>
<input type"text" id="skriva" placeholder="Skriv din vara här!"/>
<input type="image" id="knapp" src="pluss.png" alt="Submit"/>
</div>
<div id="kol2">
<ul id="listaavvara"></ul>
</div>
<script src="menudropdown.js" type="text/javascript"></script>
<script type="text/javascript" src="java.js"></script>
</body>
</html>
function laggtill(cool, namnVara) {
var vara = document.createElement("li");
vara.innerText = namnVara;
cool.appendChild(vara);
}
var button = document.getElementById("knapp");
button.onclick = function() {
var skriva = document.getElementById("skriva")
var namnVara = skriva.value;
if(!namnVara|| namnVara =="" || namnVara == " " ){
return false;
}
laggtill(document.getElementById("listaavvara"), namnVara);
};
javascrpit 2:
function klickaKnapp(x){
var skrivrutan = document.getElementById(x), maxH="100px";
if(skrivrutan.style.height == maxH){
skrivrutan.style.height = "0px";
} else {
skrivrutan.style.height = maxH;
}
}
HOPEFULLY YOU KNOW WHAT I MEAN! (my pictures are not here)
Because
var button = document.getElementById("knapp");
button.onclick = function() { ... }
overrides the inline event handler. You need to attach events with addEventListener
button.addEventListener("click", function(){...}, false);
Your example works for me on fiddle: http://jsfiddle.net/7zjb86ab/
So this looks like there is something wrong with your imported scripts
<script src="menudropdown.js" type="text/javascript"></script>
<script type="text/javascript" src="java.js"></script>
Are those the two files with your javascript snippets inside?
You could also try to replace
var button = document.getElementById("knapp");
button.onclick = function() {
with
function addItem() {
and then add the function as onclick attribute like you do with the klickaKnapp function
<input type="image" id="knapp" src="pluss.png" alt="Submit" onclick="addItem()" />