var app=angular.module('ang',[]);
app.controller('ctr',function($scope){
$scope.run=function(){alert("run")}
$scope.break=function(){alert("break")}
})
.test{width:160px;height:30px;background-color:green;color:white}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="ang" ng-controller='ctr'>
<button class="test" ng-click="a?'run()':'break()'">click=calling...{{a?'run()':'break()'}}</button>
<button ng-click="a=!a">click me</button>{{a}}
</div>
</body>
</html>
Here i want to dynamically change the value of ng-click based on a value using conditional statement,but it is not working as expected.Please help me out
Thanks in advance
Change this line shown as below
Because it is already interpolated. You need not to mention ' ' again to call the scope function
<button class="test" ng-click="a?run():break()">click=calling...{{a?'run()':'break()'}}</button>
remove the single quote in the function
change this
{{a?'run()':'break()'}}
to this
{{a?run():break()}}
var app=angular.module('ang',[]);
app.controller('ctr',function($scope){
$scope.run=function(){alert("run")}
$scope.break=function(){alert("break")}
})
.test{width:160px;height:30px;background-color:green;color:white}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="ang" ng-controller='ctr'>
<div class="test" ng-click="a?'run()':'break()'">click=calling....{{a?run():break()}}</div>
<button ng-click="a=!a">click me</button>{{a}}
</div>
</body>
</html>
Related
My Index.html
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<button onclick="document.location='target.html'" name="this" type="submit" value="hello" >target</button>
</body>
</html>
My Target.html
<!DOCTYPE html>
<html>
<body>
<h1>2nd page</h1>
</body>
</html>
I would like to access the have access to the value of the clicked button on index.html so i can use it anywhere on the target.html page
In my head it looks something like this...
<!DOCTYPE html>
var buttonval = value of button click
<html>
<body>
<h1>2nd page</h1>
</body>
</html>
Ideally I would like to achieve this using only html and java script
You first need to send the value, so based on your code it would go something like this:
<button onclick="document.location='target.html?val=hello'" name="this" type="submit" value="hello" >target</button>
And then you need to recover that value on the target page:
var url = new URL(window.location.href);
var val = url.searchParams.get("val");
You can use GET method (value in the Url) or POST method (use <FORM).
Here in Get :
Index.html:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<button onclick="document.location='target.html?val=1234'" name="this" type="submit" value="hello" >target</button>
</body>
</html>
Target.html :
<!DOCTYPE html>
<html>
<body>
<h1>2nd page</h1>
<div id="val"></div>
</body>
<script type="text/javascript">
var parameters = location.search.substring(1).split("?");
console.log(parameters);
var vals = parameters[0].split("=");
console.log(vals);
document.getElementById("val").innerHTML = "value = "+vals[1];
</script>
</html>
See informations in the Console (F12) in your Browser.
Good continuation.
_Teddy_
Use Page Including Using PHP
example : <?php include("page.php"); ?>
perform click direct in visible file.
Jets File : https://cdnjs.cloudflare.com/ajax/libs/jets/0.14.0/jets.min.js
Html File :
<!DOCTYPE html>
<html>
<head>
<script src="assets/jets.js"></script>
</head>
<body>
<script>
var jets = new Jets({
searchTag: '#jetsSearch',
contentTag: '#jetsContent'
});
</script>
<input type="search" id="jetsSearch">
<div id="jetsContent">
<div>Barry Williamson</div>
<div>Francis Reeves</div>
<div>…</div>
</div>
</body>
</html>
I want to get this result
Jets.js
Search field for several words
You're HTML is out of order. It should look like this:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jets/0.14.0/jets.min.js"></script>
</head>
<body>
<input type="search" id="jetsSearch">
<div id="jetsContent">
<div>Barry Williamson</div>
<div>Francis Reeves</div>
<div>…</div>
</div>
<script>
var jets = new Jets({
searchTag: '#jetsSearch',
contentTag: '#jetsContent'
});
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<script>
var a=document.getElementById("one").value;
console.log(a);
</script>
</head>
<body>
<input type="text" id="one" name="acc" value="iss">
</body>
</html>
In the above code snippets I am trying to print the value associated with input which has id ="one".
But I am getting error as
cannot read property 'value' of null.
You need to put your JavaScript at the end of the body. Placing it in head, means, it will execute even before the DOM elements are ready. Placing it at the end of body, means, JS will execute after the body elements are loaded:
<html>
<body>
<input type="text" id="one" name="acc" value="iss" />
<script type='text/javascript'>
var a = document.getElementById('one').value;
console.log(a);
</script>
</body>
</html>
If you use JQuery, then your code should be in $(document).ready(function(){ ... })
you need to place the <script>...</script> part at the end of your document:
<!doctype html>
<html>
<body>
<input type="text" id="one" name="acc" value="iss">
<script>
var a=document.getElementById("one").value;
console.log(a);
</script>
</body>
</html>
Or you use document.onready event:
<!doctype html>
<html>
<head>
<script>
document.addEventListener("load", function() {
var a=document.getElementById("one").value;
console.log(a);
});
</script>
</head>
<body>
<input type="text" id="one" name="acc" value="iss">
</body>
</html>
Here is the code from the book "HTML 5 + JS for Dummies", looking at it for more than 2 hours and can't find a reason why it doesn't want to work. I'm in very early stage and sorry for my newb question.
<!DOCTYPE html>
<html>
<head>
<title> Outputting data to HTML </title>
<script language ="JavaScript">
{
document.getElementById("myText").
innerHTML ="Clicked!";
}
</script>
</head>
<body>
<h1> Creating HTML Element Output </h1>
<div> <p id="myText">Change Me </p> </div>
<div>
<input id="btnClickMe"
type="button"
value = "Click me"
onlick="WriteText()"/>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title> Outputting data to HTML </title>
<script>
function WriteText()
{
document.getElementById("myText").
innerHTML ="Clicked!";
}
</script>
</head>
<body>
<h1> Creating HTML Element Output </h1>
<div> <p id="myText">Change Me </p> </div>
<div>
<input id="btnClickMe"
type="button"
value = "Click me"
onclick="WriteText()"/>
</div>
</body>
</html>
Here's what i did/what was wrong:
You have used wrong syntax for functions or you forgot to use the function keyword
You misspelled onclick (onlick)
I moved the script part out of the head
Use setAttribute method because input filed have not innerHTML property.
`<script language ="JavaScript">
function WriteText()
{
document.getElementById("myText").setAttribute("value", "Clicked!");
}
</script>
</head>
`
i have 2 div with relative position
user with a button fill first Div(innerHTML)
i want second Div move down when first Div Filled
show below link
Demo
Like this? jsFiddle
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type='button' value='Add' onclick='AddEl()' />
<div style='position:relative;background-color:Red'>
01
<div id='Content' style='position:relative;background-color:Green'>
</div>
</div>
<div style='position:relative;background-color:Blue'>
Hagh
<div>
<script>
function AddEl()
{
document.getElementById('Content').innerHTML='Ya';
}
</script>
</body>
</html>
You had the nesting wrong in the <div>s.
It was really hard to understand your question, next time please write full sentences.
But I think I understood what you want to achieve.You can't just keep open divs, you have to close them. after the div just write </div>.If you open a div inside a div at least have some styling or other content, beside the inner-div, inside the parent-div.Fix those and it will work for you.
Here is the fixed code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type='button' value='Add' onclick='AddEl()' />
<div style='position:relative;background-color:Red'>
01
</div>
<div id='Content' style='position:relative;background-color:Green'>
</div>
<div style='position:relative;background-color:Blue'>
Hagh
</div>
</body>
<script>
function AddEl()
{
document.getElementById('Content').innerHTML='Ya';
}
</script>
</html>