index.html
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>To Do List</title>
<link href="skeleton.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="todoController">
<div class="section hero">
<div class="container">
<div class="row">
<div class="three columns">
<li>
<button class="button button-primary" ng-click="btnClick(first)">Data 1</button>
</li>
</div>
<div class="nine columns">
<h4>{{dataText}}</h4>
</div>
</div>
</div>
</div>
</body>
</html>
app.js
var app = angular.module('todoApp', []);
app.controller('todoController', function ($scope) {
$scope.dataText = "";
$scope.btnClick = function (num){
dataText = "This is data from the " + num + " button."
};
});
When I click the button, I would expect the ng-click to initiate and call the function in the controller, but when I click nothing happens, the text on the screen doesn't change or anything. What am I doing wrong?
There is no variable named first in your html,
<li>
<button class="button button-primary" ng-click="btnClick(first)">Data 1</button>
</li>
Instead of that, Pass it as a string
<li>
<button class="button button-primary" ng-click="btnClick('first')>Data 1</button>
</li>
Also change the line like this,
$scope.btnClick = function (num){
$scope.dataText = "This is data from the " + num + " button."
};
Here is the working Plunker
Related
let screen = document.getElementsByClassName("screen");
let buttons = Array.from(document.getElementsByClassName('calc-button'));
buttons.map(button => {
button.addEventListener('click', (e) => {
switch(e.target.innerText) {
default:
screen.innerText += e.target.innerText;
}
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Calculator</title>
<meta charset="UTF-8">
</head>
<body>
<div class="wrapper">
<section class="screen">0</section>
<section class="calc-buttons">
<div class="calc-button-row">
<button class="calc-button">C</button>
<button class="calc-button">←</button>
<button class="calc-button">÷</button>
</div>
<div class="calc-button-row">
<button class="calc-button">7</button>
<button class="calc-button">8</button>
<button class="calc-button">9</button>
<button class="calc-button">×</button>
</div>
<div class="calc-button-row">
<button class="calc-button">4</button>
<button class="calc-button">5</button>
<button class="calc-button">6</button>
<button class="calc-button">−</button>
</div>
<div class="calc-button-row">
<button class="calc-button">1</button>
<button class="calc-button">2</button>
<button class="calc-button">3</button>
<button class="calc-button">+</button>
</div>
<div class="calc-button-row">
<button class="calc-button">0</button>
<button class="calc-button">=</button>
</div>
</section>
</div>
<script src="code.js"></script>
</body>
</html>
When I run that code browser says that variable called "screen" is null.
But I'm tried to check mistakes in the names of variables and ids. But I couldn't find anything, what can be a reason for errors in this code.
Update: I add Html. I haven't element with id "screen", because I had a class with same name, so I changed getElementById to getElementsByClassName. And now is no errors, but It didn't display symbols on the screen.
I am in the midst of troubleshooting a webpage that is able to open up a specific title from index.html to titleDetails.html.
However, ng-click in my index.html stopped working all of a sudden. I did not make any changes that could affect the link. It has been working fine all along (redirection of page from index.html to titleDetails.html) .
Original post here
Below are my codes:
app.js
(function () {
angular
.module("BlogApp", [])
.controller("BlogController", BlogController);
function BlogController($scope, $http) {
$scope.createPost = createPost;
$scope.deletePost = deletePost;
$scope.editPost = editPost;
$scope.updatePost = updatePost;
$scope.postDetail = null;
function init() {
getAllPosts();
}
init();
function titleDetails(post){
$scope.postDetail = post;
window.location = "/titleDetails.html";
}
function updatePost(post){
console.log(post);
$http
.put("/api/blogpost/"+post._id, post)
.success(getAllPosts);
}
function editPost(postId){
$http
.get("/api/blogpost/"+postId)
.success(function(post){
$scope.post = post;
});
}
function deletePost(postId){
$http
.delete("/api/blogpost/"+postId)
.success(getAllPosts);
}
function getAllPosts(){
$http
.get("/api/blogpost")
.success(function(posts) {
$scope.posts = posts;
});
}
function createPost(post) {
console.log(post);
$http
.post("/api/blogpost",post)
.success(getAllPosts);
}
}
})();
index.html
<!DOCTYPE html>
<html lang="en" ng-app="BlogApp">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="app.js"></script>
<title>Title</title>
</head>
<body>
<div class="container" ng-controller="BlogController">
<h1>Blog</h1>
<input ng-model="post.title" class="form-control" placeholder="title"/>
<textarea ng-model="post.body" class="form-control" placeholder="body"></textarea>
<button ng-click="createPost(post)" class="btn btn-primary btn-block">Post</button>
<button ng-click="updatePost(post)" class="btn btn-success btn-block">Update</button>
<div ng-repeat="post in posts">
<h2>
<a ng-click="titleDetails(post)">{{ post.title }} </a>
<a ng-click="editPost(post._id)" class="pull-right"><span class="glyphicon glyphicon-pencil"></span></a>
<a ng-click="deletePost(post._id)" class="pull-right"><span class = "glyphicon glyphicon-remove"></span></a>
</h2>
<em>{{post.posted}}</em>
<p>{{post.body}}</p>
</div>
</div>
</body>
</html>
titleDetails.html:
<!DOCTYPE html>
<html lang="en" ng-app="BlogApp">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="app.js"></script>
<title>Title</title>
</head>
<body>
<div class="container" ng-controller="BlogController">
<h1>Blog</h1>
<div>
<h2>
<a>{{ postDetail.title }} </a>
</h2>
<em>{{postDetail.posted}}</em>
<p>{{postDetail.body}}</p>
</div>
</div>
</body>
</html>
You are missing $scope.titleDetails = titleDetails; in your controller.
Furthermore, I would recommend using controller as syntax.
So it would be something like this:
index.html
<div class="container" ng-controller="BlogController as blogCtrl">
...
<a ng-click="blogCtrl.titleDetails(post)">{{ blogCtrl.post.title }} </a>
your controller
function BlogController($scope, $http) {
var vm = this;
vm.titleDetails = titleDetails;
//rest of your code using 'vm' instead of '$scope'
This way, you can stop using $scope.
You can find more details here.
I'm new to JS, and I've looked online, but I'm still not sure why I'm getting these errors. I have an index.html and a CSS sheet. The JS seems to be problematic but I can't figure out why.
The user is supposed to input a few values, click the button, and then the function should trigger and make a change to the "result" div element.
Index.HTML
<html>
<head>
<title>Out of Shield Options</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles/main.css"
</head>
<body>
<h1>Out of Shield</h1>
<div class="navbar">
<ul>
<li>Home</li>
<li>FAQ</li>
<li>Contact Us</li>
</ul>
</div>
<h2>Calculator</h2>
<div id="inputInfo">
<div class="inputLabel">
<label>Hit Frame:</label><input type="text" class ="textField" id="hitFrame" class="inputs" value="0"></input>
</div>
<div class="inputLabel">
<label>IASA Frame:</label><input type="text" class ="textField" id="iasaFrame" class="inputs" value="0"></input>
</div>
<div class="inputLabel">
<label>Damage:</label><input type="text" class ="textField" id="damage" class="inputs" value="0"></input>
</div>
<div class="submit"><input id="calculateButton"type="button" value="Calculate!" onclick="calculateAdvantage()"></div>
<div id="result"></div>
</div>
<script>
calculateAdvantage(){
var hitFrame = document.getElementById("hitFrame");
var IASA = document.getElementById("iasaFrame");
var damage = document.getElementById("damage");
var shieldStun = (damage / 1.75) + 2;
var result = IASA - hitFrame - shieldStun;
document.getElementById("calculateButton").innerHTML = result;
}
</script>
</body>
</html>
You must declare calculateAdvantage as a function:
function calculateAdvantage() {
// Your code goes there
}
I want to hide "add new button" when Im creating the record. and only show it back when Im done creating record.
Same as the "submit one button", I want to hide it (submit one button) and showing back the "add new button" as Im done submitting. How to do that?
below is my code and here is my plunkr:
index.html
<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<a ng-show="hideAddButton" ng-hide="hideAddButton" ng-click="addNew();hideAddButton = !hideAddButton">+ add new</a>
<form name="mainForm" ng-submit="submitAll()">
<ul>
<li ng-repeat="item in items" ng-form="subForm">
<input type="text" required name="name" ng-model="item.name"/>
<span ng-show="subForm.name.$error.required">required</span>
<button type="button" ng-disabled="subForm.$invalid" ng-click="submitOne(item);hideAddButton = !hideAddButton">Submit One</button>
</li>
</ul>
<button type="submit" ng-disabled="mainForm.$invalid">Submit All</button>
</form>
<hr/>
<div ng-show="lastSubmit">Last Submit:</div>
<pre>{{lastSubmit | json}}</pre>
</body>
</html>
app.js
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [];
$scope.addNew = function (){
$scope.items.push({ name: '' });
};
$scope.submitOne = function (item){
$scope.lastSubmit = angular.copy(item);
};
$scope.submitAll = function() {
$scope.lastSubmit = angular.copy($scope.items);
}
});
Here is my solution: http://plnkr.co/edit/8kOmWQ96UFkNOxZqcFMS?p=preview
app.controller('MainCtrl', function($scope) {
$scope.items = [];
$scope.isSubmitting = false;
$scope.addNew = function (){
$scope.isSubmitting = true;
// Here I added a state for each item.
$scope.items.push({ name: '', showButton:true });
};
$scope.submitOne = function (item){
item.showButton = false;
$scope.isSubmitting = false;
$scope.lastSubmit = angular.copy(item);
};
$scope.submitAll = function() {
$scope.items.forEach(function(i){i.showButton=false;})
$scope.isSubmitting = false;
$scope.lastSubmit = angular.copy($scope.items);
}
});
HTML
<body ng-controller="MainCtrl">
<a ng-hide="isSubmitting" ng-click="addNew();">+ add new</a>
<form name="mainForm" ng-submit="submitAll()">
<ul>
<li ng-repeat="item in items" ng-form="subForm">
<input type="text" required name="name" ng-model="item.name"/>
<span ng-show="subForm.name.$error.required">required</span>
<button ng-show="item.showButton" type="button" ng-disabled="subForm.$invalid" ng-click="submitOne(item);">Submit One</button>
</li>
</ul>
<button type="submit" ng-disabled="mainForm.$invalid">Submit All</button>
</form>
<hr/>
<div ng-show="lastSubmit">Last Submit:</div>
<pre>{{lastSubmit | json}}</pre>
</body>
I think this is what you are asking for, but I don't think the "submit all" button makes much sense in this scenario, unless you allow to add more items before submitting them (but you clearly state you want the "add new"-button hidden).
Also I was unsure if you actually wanted to store a state for each item, but showing/hiding all buttons didn't make much sense to me either...
You should use the ng-show or ng-hide directives.
with ng-show:
<button ng-show="hideAddButton === false">
with ng-hide:
<button ng-hide="hideAddButton === true">
I need to make the letter "x" clickable and ad a function that removes the text that this line below creates.
$("#user").prepend("<li>Hello! <span id='clickable'>x</span></li>");
$(document).ready(function() {
$("#hello").click(function() {
$("#user").prepend("<li>Hello! <span id='clickable'>x</span></li>");
$("#webpage").prepend("<li>Why hello there!!</li>");
$("#user").children("li").first().click(function(){
$(this).remove();
});
$("#webpage").children("li").first().click(function(){
$(this).remove();
});
});
$("#goodbye").click(function() {
$("#user").prepend("<li>Goodbye!</li>");
$("#webpage").prepend("<li>Goodbye, dear user!</li>");
$("#user").children("li").first().click(function(){
$(this).remove();
});
$("#webpage").children("li").first().click(function(){
$(this).remove();
});
});
$("#stop").click(function() {
$("#user").prepend("<li>Stop copying me!</li>");
$("#webpage").prepend("<li>Sorry, i meant no offense.</li>");
$("#user").children("li").first().click(function(){
$(this).remove();
});
$("#webpage").children("li").first().click(function(){
$(this).remove();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link href="CSS/bootstrap.css" rel="stylesheet" type="text/css">
<link href="CSS/styles.css" rel="stylesheet" type="text/css">
<script src="jQuery/jQuery.js"></script>
<script src="talk.js"></script>
<title>Talk to the web page</title>
</head>
<body>
<div class="container">
<h1>Talk to the web page</h1>
<p>Click a button to say something to the web page. See what it says back!</p>
<button class="btn btn-primary" id="hello">Say "hello"</button>
<button class="btn btn-inverse" id="goodbye">Say "goodbye"</button>
<button class="btn btn-danger" id="stop">Say "stop copying me!"</button>
<div class="row">
<div class="col-md-6">
<h2>You said:</h2>
<ul class="unstyled" id="user">
</ul>
</div>
<div class="col-md-6">
<h2>The web page said back:</h2>
<ul class="unstyled" id="webpage">
</ul>
</div>
</div>
</div>
</body>
</html>
a clickable letter that removes the text this line above creates.
Create one click event that uses .on (since dynamic content and what not) and remove the parent li element:
$("#user").on("click", "span.clickable", function() {
$(this).parent("li").remove();
});
Also use the class clickable and not the ID (I assume you have more than 1);