Programmatically add javascript in html page - javascript

I'm trying to build an HTML page like this
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function setup(){
var mydesign = '<input type="button" value="Test" onclick="BtnClick()" /><div id=result></div>';
var myscript = 'function BtnClick(){alert("DoTest()");}';
eval(myscript);
document.getElementById("myBody").innerHTML = mydesign;
}
</script>
</head>
<body id = "myBody" onload="setup()">
</body>
</html>
But onclick cannot find function BtnClick().
Any ideas?

The eval() function evaluates or executes an argument
create BtnClick() function separate as below
function BtnClick(){
alert("DoTest()");
}
function setup() {
var mydesign = '<input type="button" value="Test" onclick="BtnClick()" /><div id=result></div>';
document.getElementById("myBody").innerHTML = mydesign;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>JS</title>
</head>
<body id="myBody" onload="setup()">
</body>
</html>

It is possible to write js functions directly into the onclick attribute
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body id = "myBody" onload="setup()">
<script type="text/javascript">
function setup(){
var mydesign = "<button onclick="+'alert("hello")'+">Click me</button>";
document.getElementById("myBody").innerHTML = mydesign;
}
</script>
</body>
</html>

Related

JQuery '$' getting "ReferenceError: $ is not defined" when in my .JS file

My code works when I write the JS in HTML like so:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Address Book</title>
</head>
<body>
<input id="submitButton" type = "submit" value = "Save">
<script>
$("#submitButton").on("click", function() {
console.log("result!");
});
</script>
</body>
but when I split it out into it's own .js file, the JS file doesn't recognise the JQuery '$' sign. This is how it currently looks in both HTML and JS (I added the .JS source to the HTML file):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
**<script type="text/javascript" src="addressBook.js"></script>**
<title>Address Book</title>
</head>
<body>
<input id="submitButton" type = "submit" value = "Save">
</body>
and in the addressBook.js file:
$("#submitButton").on("click", function() {
console.log("omg, you clicked me!");
I get the following error logged to the console when i click the button:
$("#submitButton").on("click", function() {
^
ReferenceError: $ is not defined
Any help would be appreciated!
Thanks
Wat selfagency said + put the script tag before the end of the body.
html file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Address Book</title>
</head>
<body>
<input id="submitButton" type="submit" value="Save" />
<script type="text/javascript" src="addressBook.js"></script>
</body>
</html>
addressbook.js
$('#submitButton').on('click', function() {
console.log('result!');
});
The reason why the script tag in the head in this case doesn't work is because the button did not yet exist in the DOM when the addressBook script was run. Described in more detail here.
I don't think that you need to add the script before the end of the body.
It works after I created addressBook.js and change the jquery
$('#submitButton').on('click', function() {
console.log("omg, you clicked me!");
});
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script type="text/javascript" src="addressBook.js"></script>
<title>Address Book</title>
</head>
<body>
<input id="submitButton" type="submit" value="Save" />
</body>
</html>
<script>
$("#submitButton").on("click", function() {
console.log("result!");
</script>
That is not proper syntax. It should be:
<script>
$(document).ready(function () {
$("#submitButton").on("click", function() {
console.log("result!");
});
});
</script>

setCustomValidity is not a function

This is the simple code I run hoping to get control over html5 validation but the browser says setCustomvalidity is not a function. what am I doing wrong?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<input type='text' id='tocheck' />
<script>
$("#tocheck").click(function () {
var $this = $(this);
$this.setCustomValidity("slkdjf");
});
</script>
</body>
</html>
jQuery does not have the setCustomValidity function, but the actual DOM element does. The jQuery selector always returns an Array, so you can use the zero index to get the actual DOM element or you can just use this (not $(this)) to get the DOM element upon which you can set the custom validity.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<form>
<input type='text' id='tocheck'/>
<button>
Submit
</button>
</form>
<script>
$("#tocheck").click(function(){
this.setCustomValidity("slkdjf");
});
</script>
</body>
try to
$this[0].setCustomValidity("slkdjf");
And html
<form>
<input type="text" id="tocheck">
<button type="submit">Button</button>
</form>
You can simply do this.setCustomValidity("slkdjf"); this is the DOM object, whereas $(this) is the jQuery wrapper around same.
$("#tocheck").click(function(){
this.setCustomValidity("slkdjf");
$( "<p>slkdjf</p>" ).insertAfter( this );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='tocheck'/>
you can use syntax like
$('#id**^**.class')[0].setCustomValidity('**some notification string ...**');

Jquery basic function test call is not working?

My Jsp is ,
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- <%#include file="include.jsp"%> --%>
<%# taglib prefix="form" uri="../tld/spring-form.tld"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../jquery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../jquery/jqueryChat.js"></script>
</head>
<body>
<input type="text" id="test" name="test" />
<input type="button" value="Ajax Submit" onclick="madeAjaxCall()">
</body>
</html>
My JqueryChat.js will be .,
function madeAjaxCall(){
alert("Hello 99");
alert($("#test").val());
}
When I click the button I am getting the error as ,
I need to get the value of the text-box in the alert.
Good answers are definitely appreciated.
Hi you need to call jquery object onload before you are using on click event here..As $(document).ready().So only ist
The following code works perfectly for me.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$("#button").click(function(){
alert("Hello 99");
alert($("#test").val());
});
});
</script>
</head>
<body>
<input type="text" id="test" name="test" />
<input type="button" id="button" value="Ajax Submit">
</body>
</html>
Check if your jquery.js and jqueryChat.js are downloaded from proper place.
Put your JS code in $(document).ready(function() { .. });
Use $("#button").click(function(){ instead of
onclick="madeAjaxCall()"

innerHTML not recive his cookie title

I got two files, one file called "TitleLinkCookie.html",when I click on some link are creates a cookie named "NewTitle" . with value innerHTML in our case, "Hello world php 1"/2/3.and is working well. The second file called "showCodePhp.html", it is needed to receive the cookie title and display it in h3 tag id="TitleField", innerHTML, from some reason it is not working as I want. Thanks for any help.
TitleLinkCookie.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<META NAME="Description" CONTENT="Guide,Tutorial">
<meta name="keywords" content="HTML,CSS,JavaScript, jQuery,Html5,Framework,php,photoshop,design" />
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Link guide</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<STYLE type="text/css">
a { color:red; margin:5px; cursor:pointer; }
a:hover { background:yellow; }?
</STYLE>
<script type="text/javascript">
$(document).ready(function() {
$('a').each(function() {
$(this).click(function() {
var varibaleTitle=$(this).html();
setCookie(varibaleTitle);
});
});
function setCookie(varibaleTitle){
var expireDate = new Date();
expireDate.setMonth(expireDate.getMonth()+1);
var NewTitle = varibaleTitle;
document.cookie = "NewTitle=" + NewTitle + ";path=/;expires=" + expireDate.toGMTString();
alert(varibaleTitle)};//end function setCookie
});// document ready
</script>
</head>
<body >
<p><a id="link1" href="showCodePhp.html" >Hello world php 1</a></p>
<p><a id="link2" href="showCodePhp.html" >Hello world php 2</a></p>
<p><a id="link3" href="showCodePhp.html" >Hello world php 3</a></p>
</body >
</html>
showCodePhp.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hello World</title>
<!--<script src="http://www.centerwow.com/gotemp/gotemptics.js" type="text/javascript"></script>-->
<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shBrushPhp.js"></script>
<link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/>
<script type="text/javascript">SyntaxHighlighter.all();</script>
<script type="text/javascript">
$(document).ready(function() {
function reedCookie() {
var str =document.cookie.split("=")[1];
var str2 = document.getElementById("TitleField").innerHTML;
if (document.cookie != "") {
str2 = "Your Title is : " + str;
}//end reedCookie
});// document ready
</script>
</head>
<body style="background: white; font-family: Helvetica">
<p>Back to Home</p>
<p><h3 id="TitleField"></h3>Title : </p>
<pre class="brush: php;">
<?
// Hello world in PHP
print("Hello World");
?>
</pre>
<body>
</html>
You stated that you need to change the innerHTML of the HTML element "TitleField" but actually you didn't set it!.
I modified you script to set it below :
<script type="text/javascript">
$(document).ready(function() {
function reedCookie() {
var str =document.cookie.split("=")[1];
var str2 = document.getElementById("TitleField").innerHTML;
if (document.cookie != "") {
$("#TitleField").html("Title :"+ str );
}//end reedCookie
});// document ready
</script>

running embedded javascript - a small test file

I've updated the code to reflect input.
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<!-- <script type="text/javascript" src="../archelib.js"></script> -->
<title>Test - Bookmark List</title>
<style>
</style>
</head>
<body>
<span id="f0e"></span>
<script type="text/javascript">
var arr1=['','a','b','c']
document.write(check_empty(arr1,'f0e','fail'));
function check_empty(text,id,res)
{
for(var d=0;d<text.length;d++)
{
if(text[d].value=='')
{
o2(id,res);
return 0;
}
}
return 1;
}
function o2(a,b)
{
return document.getElementById(a).innerHTML=b;
}
</script>
</body>
</html>
Use type array for the input argument.
change
if(text[d].value=='')
to
if(text[d].value!='')

Categories