call javascript function from html generated by another javascript function - javascript

I'm a newbie in javascript. As the title says, I'm trying to call javascript function from html generated by another javascript function. Following is a simple version of this code:
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function myFunction1()
{
var html_text = "<HTML><BODY><FORM><INPUT type=\"button\" onClick=
\"myFunction2()\" value=\"function2\" /></FORM></BODY></HTML>";
document.write(html_text);
document.close();
}
function myFunction2()
{
alert("function2 called!");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM><INPUT type="button" onClick="myFunction1()" value="function1"
/></FORM>
</BODY>
</HTML>
When I run firebug, I got an error saying "myFunction2 is not defined". I guess I have to put myFunction2 in html code generated by myFunction1. So I changed my code like this:
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function myFunction1()
{
var html_text = "<HTML><HEAD><SCRIPT language=\"JavaScript
\">function myFunction2(){alert(\"function2 called!\");}
</SCRIPT></HEAD><BODY><FORM><INPUT type=\"button\" onClick=\"myFunction2()\"
value=\"function2\" /></FORM></BODY></HTML>";
document.write(html_text);
document.close();
}
/* function myFunction2()
{
alert("function2 called!");
} */
</SCRIPT>
</HEAD>
<BODY>
<FORM><INPUT type="button" onClick="myFunction1()" value="function1"
/></FORM>
</BODY>
</HTML>
However, after this change I got some messy result and the firebug says "unterminated string literal for var html_text=...". Any suggestions?
Also, my actual myFunction2 is really big, if I have to insert it into the html generated by myFunction1, is there a good way to put it in? Also, the instructor doesn't want us to use a separate file. Thanks!

This will work
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function myFunction1()
{
var html_text = "<HTML><BODY><sc"+"ript type=\"text/javascript\">function myFunction2(){alert('im 2')}</sc"+"ript><FORM><INPUT type=\"button\" onClick=\"myFunction2()\" value=\"function2\" /></FORM></BODY></HTML>";
document.write(html_text);
document.close();
}
function myFunction2()
{
alert("function2 called!");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM><INPUT type="button" onClick="myFunction1()" value="function1"
/></FORM>
</BODY>
</HTML>
Note that you cannot include "<script>" in a sttring, you must break it in to "<scr" + "ipt>"

I've put your first version of code into http://jsfiddle.net/EwR6X/, and with one small amend - deleting couple of unwanted line breaks after onClick= - it works just fine.

Related

The html doesn't seem to be able to read the script element

This code is trying to change a paragraph element in the html, but nothing in the script element seems to even be recognized
We have tried many different variations of this code to try to understand what isn't working, but nothing in the script element is even recognized
<!DOCTYPE html>
<html>
<head>
<h3>Final Schedule</h3>
</head>
<body>
<p id ="fs">hi2</p>
<input id="request" type="button" value="Get Final Schedule">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
$(document).ready(function(){
console.log("hi");
$("#request").click(requestClicked);
console.log("done2");
});
console.log("h")
function requestClicked(){
$("#fs").html("ohafhiohfos");
console.log("done");
};
</script>
</body>
</html>
I want the code to change the paragraph element to something else, but nothing is working, and the console.log()'s aren't working at all
You can't put your code inside the script element for jQuery. Instead add another script tag below it with your code.
<!DOCTYPE html>
<html>
<head>
<h3>Final Schedule</h3>
</head>
<body>
<p id ="fs">hi2</p>
<input id="request" type="button" value="Get Final Schedule">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
console.log("hi");
$("#request").click(requestClicked);
console.log("done2");
});
console.log("h")
function requestClicked(){
$("#fs").html("ohafhiohfos");
console.log("done");
};
</script>
</body>
</html>
A script tag can't have both src and internal text code. You need two tags
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
console.log("hi");
$("#request").click(requestClicked);
console.log("done2");
});
console.log("h")
function requestClicked(){
$("#fs").html("ohafhiohfos");
console.log("done");
};
</script>
you need 2 script tags, 1 to list the jquery library you're using and 1 to write the actual code
Try making one <script> tag for jQuery (<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>) and another one for your code:
<script>
$(document).ready(function(){
console.log("hi");
$("#request").click(requestClicked);
console.log("done2");
});
console.log("h")
function requestClicked(){
$("#fs").html("ohafhiohfos");
console.log("done");
};
</script>
You are using a rather old version of jQuery and might want to update to a more recent one
A script tag can either have an src attribute, requiring a script file, OR script content directly, not both. So just make a second script block with the code you'd like to execute:
<p id ="fs">hi2</p>
<input id="request" type="button" value="Get Final Schedule">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
console.log("hi");
$("#request").click(requestClicked);
console.log("done2");
});
console.log("h")
function requestClicked(){
$("#fs").html("ohafhiohfos");
console.log("done");
};
</script>

JavaScript function passing value not working properly

<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction(demox)">Click me</button>
<p id="demo"></p>
<p id="demox"></p>
<script>
function myFunction(cat) {
var dog = document.getElementById( cat);
dog.innerHTML = "Hello World";
}
</script>
</body>
</html>
I am trying to pass an id value of "demox" to a js function to display some text with an onclick event, but it doesn't seem to work. what is the problem here?
You can find script modified which solve your issue here.
https://jsbin.com/yitovikete/edit?html,output
Generally, I would suggest you to add <script> tag within the header of your HTML page like this:
https://jsbin.com/yitovikete/1/edit?html,output
This is good when you need to do something while the body is loading, or want to maybe make some ajax requests.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction('demox')">Click me</button>
<p id="demo"></p>
<p id="demox"></p>
<script>
function myFunction(cat) {
var dog = document.getElementById( cat);
dog.innerHTML = "Hello World";
}
</script>
</body>
</html>

innerHTML not changing the innerHMTL

I've tested this code in an old IE and it works, but on everything else that is modern it seems not to work.
The thing is it works only if the textarea hasn't been modified in any way, then after that it doesn't work. Any changes to the page and suddenly it ceases to function.
<html>
<script>
function clearArea() {
document.getElementById("tarea").innerHTML = "This is what\'s up.";
}
</script>
<body>
<button type="button" onclick="clearArea()">Click me to clear area</button>
<textarea id="tarea"></textarea>
</body>
</html>
Any idea what could be causing this?
Because a textarea does not have innerHTML, it has value.
function clearArea() {
document.getElementById("tarea").value = "This is what\'s up.";
}
<button type="button" onclick="clearArea()">Click me to clear area</button>
<textarea id="tarea"></textarea>
I prefer to use the value attribute, you can use it instead of innerHTML.
Here a demonstration: JSBin
Code
function clearArea() {
document.getElementById("tarea").value = "This is what's up.";
}
I think the main problem is that you forget to wrap your <script> tag in the <head> tag..
This is working :
<html>
<head>
<script>
function clearArea() {
document.getElementById("tarea").innerHTML = "This is what\'s up.";
}
</script>
</head>
<body>
<button type="button" onclick="clearArea()">Click me to clear area</button>
<textarea id="tarea"></textarea>
</body>
</html>

How to call a JavaScript function with parameter in jQuery?

This is a simple example to call a JS function when a button is clicked. In this code I used the onclick method, but I want to learn how to call the same method using jQuery instead.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#but").click(
doubleSize($("#inpt").val()); // **maybe not correct here**
);
});
function doubleSize(x)
{
//some code make a number double size
}
</script>
</head>
<body>
<input id="inpt" type="text">
<button id="but" type="button" onclick="doubleSize(document.getElementById('inpt').value)" >click me !!</button>
<div><span id="result"></span>
</div>
</body>
</html>
Replace
$("#but").click(
doubleSize($("#inpt").val()); // **maybe not correct here**
);
with
$("#but").click(function() {
doubleSize($("#inpt").val());
});
Now it should work. The trick is that .click function has callback function which controlls doings after click, and you now learned to use it.
Check my fiddle.
Find more on api.jquery.com/click.

HTML tag inside JavaScript

I am trying to use some HTML tag inside JavaScript, but the HTML tag does not work. How can U use an HTML tag inside JavaScript? I wanted to use h1 but did not work.
if (document.getElementById('number1').checked) {
<h1>Hello member</h1>
}
You will either have to document.write it or use the Document Object Model:
Example using document.write
<script type="text/javascript">
if(document.getElementById('number1').checked) {
document.write("<h1>Hello member</h1>");
}
</script>
Example using DOM
<h1></h1> <!-- We are targeting this tag with JS. See code below -->
<input type="checkbox" id="number1" checked /><label for="number1">Agree</label>
<div id="container"> <p>Content</p> </div>
<script type="text/javascript">
window.onload = function() {
if( document.getElementById('number1').checked ) {
var h1 = document.createElement("h1");
h1.appendChild(document.createTextNode("Hello member"));
document.getElementById("container").appendChild(h1);
}
}
</script>
<html>
<body>
<input type="checkbox" id="number1" onclick="number1();">Number 1</br>
<p id="h1"></p>
<script type="text/javascript">
function number1() {
if(document.getElementById('number1').checked) {
document.getElementById("h1").innerHTML = "<h1>Hello member</h1>";
}
}
</script>
</body>
</html>
This is what I used for my countdown clock:
</SCRIPT>
<center class="auto-style19" style="height: 31px">
<Font face="blacksmith" size="large"><strong>
<SCRIPT LANGUAGE="JavaScript">
var header = "You have <I><font color=red>"
+ getDaysUntilICD10() + "</font></I> "
header += "days until ICD-10 starts!"
document.write(header)
</SCRIPT>
The HTML inside of my script worked, though I could not explain why.
here's how to incorporate variables and html tags in document.write
also note how you can simply add text between the quotes
document.write("<h1>System Paltform: ", navigator.platform, "</h1>");
JavaScript is a scripting language, not a HTMLanguage type. It is mainly to do process at background and it needs document.write to display things on browser.
Also if your document.write exceeds one line, make sure to put concatenation + at the end of each line.
Example
<script type="text/javascript">
if(document.getElementById('number1').checked) {
document.write("<h1>Hello" +
"member</h1>");
}
</script>
<div id="demo"></div>
<input type="submit" name="submit" id="submit" value="Submit" onClick="return empty()">
<script type="text/javascript">
function empty()
{
var x;
x = document.getElementById("feedbackpost").value;
if (x == "")
{
var demo = document.getElementById("demo");
demo.innerHTML =document.write='<h1>Hello member</h1>';
return false;
};
}
</script>
<div id="demo"></div>
<script type="text/javascript">
if(document.getElementById('number1').checked) {
var demo = document.getElementById("demo");
demo.innerHtml='<h1>Hello member</h1>';
} else {
demo.innerHtml='';
}
</script>

Categories