Onclick not working with outside .JS file - javascript

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"/> &nbsp
<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" /> &nbsp
<button id="searchButton">Find now</button>
</p>
</fieldset>
</center>
</body>
</html>

Related

Is there a way to hint the passed argument type to IDE (in my case Webstorm) in Javascript?

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>

jQuery plugin is not working(depends-on)

<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!

AngularJS todoapp displaying as the variable name in webpage

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>

Append the results from input fields from one page and show them on another page

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>

Why is JavaScript of the HTML from page2 loaded into page1 not working?

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.

Categories