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>
Related
<!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>
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>
I've got such simple html.
vkbeatuify.js is located in the same folder.
<html>
<head>
<script type="text/javascript" src="vkbeautify.js"></script>
<script>
var variable = vkbeautify.xml("<root><cat></cat></root>");
document.getElementById('data').innerHTML = variable;
</script>
</head>
<body>
<div id="data">
</div>
</body>
</html>
But when I open page in browser Firefox - it displays nothing.
What is the problem?
I am making a form validation and I set the property of other checkboxes disable if the owner checkbox is not checked but it is not working.
Here's my html cod:
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<script src="script.js"></script>
<script src="min.js"></script>
</head>
<body>
Owner:<input type="checkbox" id="owner">
<hr>
<div id="check">
bicycle:<input type="checkbox" id="bicycle"><br>
bike:<input type="checkbox" id="bike"><br>
car:<input type="checkbox" id="car">
</div>
<script>
</script>
</body>
</html>
and in it min.js is jQuery installation file and ,
here is script.js :
$(document).ready(function(){
var $checkbox = $("#check").find("input[type=checkbox]");
$checkbox.prop('disabled', true);
$("#owner").click(function(){
var $ownercheck = $(this);
if ($ownercheck.prop('checked') === true) {
$checkbox.prop('disabled', false);
}
else
{
$checkbox.prop('disabled', true);
}
});
});
You have to put min.js above the script.js,
and your html code will look like this :
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<script src="min.js"></script>
<script src="script.js"></script>
</head>
<body>
Owner:<input type="checkbox" id="owner">
<hr>
<div id="check">
bicycle:<input type="checkbox" id="bicycle"><br>
bike:<input type="checkbox" id="bike"><br>
car:<input type="checkbox" id="car">
</div>
</body>
</html>
You must always load the library first. For issue to be fixed, script.js must go after min.js. Your code is working perfectly fine: http://jsfiddle.net/zb3m3/1/
<script src="min.js"></script>
<script src="script.js"></script>
This example works, but if i create local file like this:
<script src="jquery-big.js"></script>
<div id="test">
<div id="hello">click</div>
<div id="no-hello">click</div>
</div>
<script>
$('#test').click(function() {
if ($('#hello').is(':hover')) {
$('#hello').html($('#hello').html()+' strange ');
}
});
</script>
(removed all utf-8 bug-symbols from jsfiddle) - nothing works, and no errors in console. checked in Google Chrome 19.0.1084.46.
try like this~
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>question</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
//document ready script here
$(document).ready(function() {
$('#test').click(function() {
if ($('#hello').is(':hover')) {
$('#hello').html($('#hello').html()+' strange ');
}
});
});
</script>
</head>
<body>
<!-- element below-->
<div id="test">
<div id="hello">click</div>
<div id="no-hello">click</div>
</div>
</body>
</html>