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>
Related
I am trying to create an alert function using the getElementById and it is not working. This is a very simple button i am trying to create but obviously its not simple for a noob like me. Thank you for all your help in advance. This is what i currently have:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>alert</title>
</head>
<body>
<button onclick= "click()" style="color:green;" >click</button>
<script>
function click() {
document.getElementById("alerting").innerHTML = "I am an alert";
}
</script>
</body>
</html>
You need to add an element with id="alerting" where your text will appear. Otherwise document.getElementById("alerting") will return null and calling innerHTML on it will throw error.
<body>
<button onclick= "myFunction()" style="font-size:25px;" >click</button>
<p id="alerting">element with alerting id. value will change here</p>
<script>
function myFunction() {
document.getElementById("alerting").innerHTML = "Hello World";
}
</script>
</body>
You dont have any html elements with id="alerting" into which you can set the innerHTML.
If you want a popup alert instead of doing the innerHTML thing... just do:
alert("I am an alert");
Also of note... some browsers wont like functions named: "click".
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>alert</title>
</head>
<body>
<button onclick="someFunction()" style="color:green;" >Click Me</button>
<script>
function someFunction()
{
alert("I am an alert");
}
</script>
</body>
</html>
<!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>
here it is:
<!DOCTYPE html>
<html>
<body>
<hl>Change an HTML element</hl>
<p id="msg">Now you see me.</p>
<button type="button"
onclick="document.getElementById('msg').innerHTML = 'Gone!'">
Click Me!</button>
<button type="button"
onclick="document.getElementById('msg').innerHTML = 'Back again!'">
Bring me back!</button>
</body>
</html>
does anyone recommend a way to fix this, because I am stumped.
Though we should create the javascript file separately in real projects. But you can try the following code to test the stuff what you are trying to do/test.
<!DOCTYPE html>
<html>
<body>
<hl>Change an HTML element</hl>
<p id="msg">Now you see me.</p>
<button type="button" id="clickMeButton" onClick = clickMeClicked()>
Click Me!</button>
<button type="button" id="backMeButton" onClick = backMeClicked()>
Bring me back!</button>
<script>
function clickMeClicked() {
document.getElementById("clickMeButton").innerHTML = 'Gone!';
}
function backMeClicked() {
document.getElementById("backMeButton").innerHTML = 'Back again!';
}
</script>
</body>
</html>
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.
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.