what am I doing wrong here? I got a separate js file from my html but onclick doesn't seem to reach the js file I have. It works though if I place the function code inside the html. Help me.
//jlhtml.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text\javascript" src="jljs.js"></script>
<meta charset="utf-8">
</head>
<body>
<center>
<fieldset>
<p>
Search here: <input type="text" id="txtsearch"/>  
<button onclick="Search()">Find now</button>
</p>
</fieldset>
</center>
</body>
</html>
//jljs.js file below
function Search()
{
var me = (d3.select("#txtsearch").property("value"));
alert(me);
}
I created a short snippet which binds the Search function to the button click event using d3.
var searchButton = d3.select("#searchButton").on("click", Search);
function Search() {
var me = (d3.select("#txtsearch").property("value"));
alert(me);
}
<!DOCTYPE html>
<html lang="en">
<script src="https://d3js.org/d3.v3.min.js"></script>
<meta charset="utf-8">
<body>
<center>
<fieldset>
<p>
Search here: <input type="text" id="txtsearch" />  
<button id="searchButton">Find now</button>
</p>
</fieldset>
</center>
</body>
</html>
Related
I have the following HTML file with some JavaScript in it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
</head>
<body>
<div id="root"></div>
<div>
<label for="new-content">
<textarea id="new-content" style="width: 400px; height: 100px"></textarea>
</label>
<br/>
<button onclick="addContent(document.getElementById('new-content'))">Submit</button>
</div>
<script>
function addContent(/*HTMLTextAreaElement*/content) {
alert(content.value);
}
</script>
</body>
</html>
I like how I can hint Webstorm (or IntelliJ or Eclipse) what is the type of content is in function addContent, but I do not like how I can not tell what it is in onclick, which leads to following warning:
Here is my first world problem: Can I hint the type of document.getElementById('new-content') in the argument?
I figured out a way by trial and error, the following seems to work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
</head>
<body>
<div id="root"></div>
<div>
<label for="new-content">
<textarea id="new-content" style="width: 400px; height: 100px"></textarea>
</label>
<br/>
<button onclick="addContent(getNewContent())">Submit</button>
</div>
<div id="content"></div>
<script>
function getNewContent() {
return document.getElementById('new-content');/*HTMLTextAreaElement*/
}
function addContent(/*HTMLTextAreaElement*/content) {
document.getElementById('content').innerHTML =
document.getElementById('content').innerHTML +
'<p>'.concat(content.value).concat('</p>');
}
</script>
</body>
</html>
<script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="dependsOn-1.0.0.min.js"></script>
<script>
$(document).ready(function) {
$('#basicTest .subject').dependsOn({
'#basicTest input[type="checkbox"]': {
checked: true
}
});
});
</script
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="basicTest">
<label>
<input type="checkbox"> Check me
</label>
<input type="text" class="subject">
</form>
</body>
</html>
I am actually trying to implement the basic example which is after click on the "check me" a input box gets displayed. By using the depends on plugin is is not working. These are the files. I placed the script in between the html and head tags. Any suggestions are welcome!
I'm following a tutorial online, but when I refresh my browser I get {{todo.title}} and the checkbox doesn't put a line through the text if clicked.
Any ideas why. I don't see anything different from my code and the video I'm following.
<!doctype html>
<html lang="en" ng-app="ToDo">
<head>
<meta charset="UTF-8">
<title>todo</title>
<style>
.done{text-decoration: line-through;color:#ccc;}
</style>
</head>
<body>
<div ng-controller='todoController'>
<form name="frm" ng-submit="addTodo()">
<input type="text" name = "newtodo" ng-model="newtodo" required>
<button ng-disabled="frm.$invalid">Go</button>
</form>
<button ng-click="clearCompleted()">Clear Completed</button>
<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done" />
<span ng-class="{'done': todo.done}">{{todo.title}}</span>
</li>
</ul>
</div>
<script scr="bower_components/angular/angular.min.js"></script>
<script>
angular.module('ToDo', []).
controller('todoController', ['$scope', function($scope){
$scope.todos = [{'title': 'Build a todo app', 'done':false}];
$scope.addTodo = function(){};
$scope.clearCompleted = function(){};
}]);
</script>
</body>
</html>
you have misspelled src as scr
<script scr="bower_components/angular/angular.min.js"></script>
Please include angularjs file like below. because u not included path of AngularJS Library
<head>
<meta charset="UTF-8">
<title>todo</title>
<style>
.done{text-decoration: line-through;color:#ccc;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
I'm trying to do the following:
- I have 2 pages (page 1 with input fields & page 2 where the entered input should display)
- I need to get all that was typed from the first input field, and put the results inside the tag "content" of the 2nd page.
1º Page Input :
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Page 1 - Input</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script>
function submit() {
var code = $('textarea[name=message]').val(); //Input Code HTML
$("#iframeId").contents().find("body").html($("<div class='content'></div>").append(code));
}
</script>
</head>
<body>
<h2>Input</h2>
<textarea name="message" id="input" rows="10" cols="100"></textarea>
<input type="button" value="Submit" onclick="submit();" />
<iframe id="iframeId" name="iframeId" src="layout.html"></iframe>
<div id="test">
Text
</div>
</body>
</html>
2º Page Layout :
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Page 2 - Layout</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
</head>
<body>
<div class="header"></div>
<div class="content"></div>
<div class="sidebar"></div>
<div class="foot"></div>
</body>
</html>
THANKS!
This should work if both files are having the same origin:
<script>
function submit() {
var code = $('textarea[name=message]').val(); //Input Code HTML
$('#iframeId').contents().find('.content').text(code);
}
</script>
You were almost there :)
UPDATE:
To insert on submit:
<script type="text/javascript">
$('#iframeId').load(function(){
$('input[type="button"]').on('click',function(){
$('#iframeId').contents().find('.content').html($('textarea[name=message]').val());
});
});
</script>
To insert on type:
<script type="text/javascript">
$('#iframeId').load(function(){
$('textarea[name=message]').on('input',function(){
$('#iframeId').contents().find('.content').html($(this).val());
});
});
</script>
im trying to load html from page2 into page one but its JavaScript won't work, is this same origin policy? if it is how do i bypass this?
Page1:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>page 1 test</title>
<script src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#thisandthat').click(function() {
$("#hide").toggle('fast');
$("#cont").load('testpage2.html #res')
$("#unhide").toggle('fast');
console.log ()
});
});
</script>
</head>
<body>
<div id="">
<input id="thisandthat" name="test but" type="button" value="Button" />
<div id="hide" style="background-color:#050; width:100; height:100;">this and other things</div>
</div>
<div id="cont">
</div>
</body>
</html>
Page2
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>page 1 test</title>
<script src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#thisand').click(function() {
$("#unhide").toggle('fast');
alert ('im in')
});
});
</script>
</head>
<body>
<div id="res">
<input id="thisand" name="test but" type="button" value="Button" />
<div id="unhide" hidden="" style="background-color:#09F; width:100; height:100;">i apppear</div>
</div>
</body>
</html>
as you can see, javascript needed from page2 is present on page1. Please help.
The problem is that you're using the id selector in your $("#cont").load('testpage2.html #res')
jQuery will only load that section of page 2, therefore no Javascript is loaded. If you remove the id selector it will load the whole page including the Javascript.
$("#cont").load('testpage2.html')
Alternatively, you can place your Javascript within the res div, then that should work.
On a side note, you're missing various line ending semi colons in your code, which is not good.