I'm new to Javascript and can't figure out why no script is working in either Firefox or IE. I'm working with Notepad++ and after my external .js file didn't work I made a simple script that isn't working either:
This is the end of my html.
<div id="form1">
<form>
<textarea name="boxtext" id="textarea1" rows="10" colums="30">
maximum 300 characters
</textarea>
<button type="button" id="submit1" onclick="myFunction()">submit this</button>
</form>
</div>
<div id="forTheBoxes"></div>
<div id="footer">Copyright Jesper Hodge</div>
<script>myFunction() {window.alert("ok!")}</script>
</body>
</html>
Make this changes:
function myFunction() {
window.alert("ok!");
}
Or
var myFunction=function () {
window.alert("ok!");
}
2 things I see. The word function is missing where you declare your function.
<script>function myFunction() {window.alert("ok!")}</script>
And your script it in a bad place. Try putting it in <head> area.
This should be work:
1) Declare function myFunction
2) Insert your external js file in your html header
3) Handle event onclick button in html
function myFunction() {
alert("ok!");
}
<html>
<head>
<script type="javascript/text" src="/yourJsSourceFile"></script>
</head>
<body>
<div id="form1">
<form>
<textarea name="boxtext" id="textarea1" rows="10" colums="30">
maximum 300 characters
</textarea>
<button type="button" id="submit1" onclick="myFunction()">submit this</button>
</form>
</div>
<div id="forTheBoxes"></div>
<div id="footer">Copyright Jesper Hodge</div>
</body>
</html>
Related
I'm creating a web page that has a text area in it and the user can enter code and have it displayed underneath. If I place my function in the HTML file it works just fine but when I move it to the JS file it doesn't work. Any help, even pointing me in the direction of my issue would be appreciated.
Here is my HTML code with the function commented out......
<!DOCTYPE html>
<html>
<head>
<title>DOM TREE 2</title>
<link rel="stylesheet" href="css/Content.css">
<script type="text/javascript" src="JS/js01.js"></script>
</head>
<body style="background-color:lightgray" id="bd">
<div id="third">
<h1> DOM TREE <img src="Images/tree_logo.jpg" alt="Calc" id = "pic">
</h1>
<form id="DOMForm">
<textarea id="myTextarea" rows="4" cols="50"></textarea>
<p><button type="button" onclick="AddFunction()">Add Content</button>
<button type="button" onclick="Change()">Change Style</button>
<button type="button" onclick="Clear()">Clear Content</button>
</p>
<p id="demo"></p>
<!--<script>
function AddFunction() {
var x = document.getElementById("myTextarea").value;
document.getElementById("demo").innerHTML = x;
}
</script> -->
</body>
</html>
Here is the JS file with the function.....
function AddFunction()
{
var x = document.getElementById("myTextarea").value;
document.getElementById("demo").innerHTML = x;
}
function changestyle()
{
}
function clear()
{
document.getElementById("DomForm").reset();
}
Because names are different, compare onclick="Change()" to function changestyle() and onclick="Clear()" to function clear().
Here is my code, how can I show the image? When I run the web page, it only shows the two buttons but no image...Should I call the function inside my html?
<html>
<script language="JavaScript" type="text/JavaScript">
var photos=new Array()
var which=0
photos[0]='images/title.gif'
photos[1]='images/pinkrice.png'
function backward(){
if (which > 0){
which=which-1
document.images.photoslider.src=photos[which]
}
}
function forward(){
if (which<photos.length-1){
which=which+1
document.images.photoslider.src=photos[which]
}
}
</script>
<head><title>How to Play?</title></head>
<body>
<h1>How to Play??</h1>
<!--steps of how to play, add image here--> <br>
<form>
<input type="button" value="Back" onClick="backward()">
<input type="button" value="Next" onClick="forward()">
</form>
</body>
</html>
I Edited your code. Test this. Now are working. You need a container to show your image. document.images only store your images on cache. you need a tag to show. Download files here
<html>
<head>
<title>How to Play?</title>
<script language="JavaScript" type="text/JavaScript">
var photos=new Array();
var which=0;
photos[0]='images/title.gif';
photos[1]='images/pinkrice.png';
function backward(){
if (which > 0){
which=which-1;
document.getElementById("SliderPhoto").src=photos[which];
}
}
function forward(){
if (which<photos.length-1){
which=which+1;
document.getElementById("SliderPhoto").src=photos[which];
}
}
</script>
</head>
<body>
<h1>How to Play??</h1>
<!--steps of how to play, add image here--> <br>
<img id="SliderPhoto" src="images/title.gif" />
<form>
<input type="button" value="Back" onClick="backward()">
<input type="button" value="Next" onClick="forward()">
</form>
</body>
</html>
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>
I'm making a prototype for a chat client. At this stage, I'm just learning how to append the user's input to the text area above. However, no matter what I do, it doesn't seem to work. The only time it actually functioned correctly was in jsfiddle, but I can't get it to work when I load my actual HTML page.
It's worth mentioning that, at the advice of a tutorial, I already tried placing the script tag for my JQuery code at the end of the body instead of in the head. The tutorial said that it was essential for all elements be allowed to load before the JQuery code, so that's the way it had to be. As you can see below, the script tags are currently in the head, but that doesn't work either.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="Chat.js"></script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea">
</textarea>
<form ID="in">
<input ID="textField" type="text">
<button ID="send" type="button" name="Send" value="send">Send</button>
</form>
</div>
</body>
</html>
Chat.js
function sendText(){
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
}
Don't wrap document ready handler inside sendText() function, use that instead:
$(document).ready(function () {
$('#send').click(sendText);
});
function sendText(){
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
}
Well, it work if you change your button to submit type and bind the event to form submit:
$('#in').submit(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
return false;
});
http://jsfiddle.net/AztSB/
This seems to work for me:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').html($('#textArea').html() + text);
$('#textField').val('');
});
});
</script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea"></textarea>
<form ID="in">
<input ID="textField" type="text">
<input ID="send" type="button" name="Send" value="send"/>
</form>
</div>
</body>
</html>
Just don't wrap it in your function sendText:
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
You dont need to put it in a function. You can just leave it to Jquery :)
Your stuff in a FIDDLE to see
Jquery:
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').append(text);
$('#textField').val('');
});
UPDATE
Use append() to update the textarea with new text!
For some reason, I can't change the contents of a DIV in either IE or Firefox. Any ideas where I might be going wrong?
JavaScript
function displayTable() {
document.getElementById('retailerDiv').innerHTML = '<a>HEY!</a>';
}
HTML
<input type="text" id="userQuery" onkeydown="displayTable()"/>
<br/>
<div id="retailerDiv">
Now
</div>
The code you posted works fine. Perhaps edit and post all of your source, or link to your page on the web. I don't have any problems with this working in Firefox 3.5 or IE8:
<HTML>
<HEAD>
<script type="text/javascript">
function displayTable()
{
document.getElementById('retailerDiv').innerHTML = '<a>HEY!</a>';
}
</script>
</HEAD>
<BODY>
<input type="text" id="userQuery" onkeydown="displayTable()"/>
<br/>
<div id="retailerDiv">
Now
</div>
</BODY>
</HTML>