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>
Related
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>
I have a problem with the window.opener function (JS):
I created 3 simple pages to simulate my problem:
test.php:
<html>
<head>
</head>
<body>
<input type="button" onclick="window.open('first_page_in_popup.php', 'Popup', 'width=470,height=500');">
<input type="text" id="content" name="content" >
</body>
</html>
first_page_in_popup.php:
<html>
<head>
<script type="text/javascript" >
window.opener.document.getElementById('content').value= "Test from first page in popup";
window.open('second_page_in_popup.php', 'Popup');
</script>
</head>
<body>
</body>
</html>
second_page_in_popup.php:
<html>
<head>
<script type="text/javascript" >
window.opener.document.getElementById('content').value= "Test from second page in popup";
</script>
</head>
<body>
</body>
</html>
Result:
In IE, the input field has the content "Test from second page in popup".
In Chrome and Firefox, the content is : "Test from first page in popup".
The Error Message:
window.opener.document.getElementById(...) is null
try parent.window.opener instead of window.opener
Source: window.opener is null in firefox
I solved the problem by changing the code of page "first_page_in_popup.php" to:
<html>
<head>
<script type="text/javascript" >
window.opener.document.getElementById('content').value= "Test from first page in popup";
window.location.href = 'second_page_in_popup.php';
</script>
</head>
<body>
<p> First Page </p>
<input type="text" id="first" name="first">
</body>
</html>
window.opener.document.getElementById(...) is null
that means content in window.opener.document.getElementById is null or undefined
please try to define
content in second php as defined in first php
hope this will work.
I'm struggling to see what is wrong with my code. I've coded a local storage app to show user inputs, however, what is being input, is not displaying on the screen.
I'll show my code and hopefully someone can see an error somewhere, I think it should be working fine?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Premier League Site</title>
<link rel="stylesheet" href="style.css"/>
<script src="elliot.js"></script>
</head>
<body>
<div id="wrapper">
<header id="header">
<h1>Premier League Site</h1>
</header>
<nav id ="Menu_Bar">
<ul>
<li>Home</li>
<li>Teams</li>
<li>Extras</li>
</ul>
</nav>
<section id="sectionone">
<form>
<p>(key) One: <input type="text" id="one"></p>
<p>(value) Two <textarea id="two"></textarea></p>
<p><input type="button" id="button" value="Save"></p>
</form>
</section>
<section id="sectiontwo">
Stored Info should go here
</section>
<footer id="footer">
Elliot Harrison 2014
</footer>
</div>
</body>
</html>
That is my HTML code, here is my Javascript code.
function doFirst(){
var button = document.getElementbyId("button");
button.addEventListener("click", saveStuff, false);
}
function saveStuff(){
var one = document.getElementbyId("one").value;
var two = document.getElementbyId("two").value;
sessionStorage.setItem(one,two);
display(one);
}
function display(one){
var sectiontwo = document.getElementbyId("sectiontwo");
var two = sessionStorage.getItem(one);
sectiontwo.innerHTML = "Name of variable: "+one+"<br />Value: "+two;
}
window.addEventListener("load", doFirst, false);
Can anyone notice anything wrong?
Thanks!
EDIT: Noticed one problem, I did not have ">" at the end of
Javascript is case sensitive, you have to use getElementById instead of getElementbyId.
there is also antoher error in your html:
<p>(key) One: <input type="text" id="one" /></p>
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!
i have 2 div with relative position
user with a button fill first Div(innerHTML)
i want second Div move down when first Div Filled
show below link
Demo
Like this? jsFiddle
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type='button' value='Add' onclick='AddEl()' />
<div style='position:relative;background-color:Red'>
01
<div id='Content' style='position:relative;background-color:Green'>
</div>
</div>
<div style='position:relative;background-color:Blue'>
Hagh
<div>
<script>
function AddEl()
{
document.getElementById('Content').innerHTML='Ya';
}
</script>
</body>
</html>
You had the nesting wrong in the <div>s.
It was really hard to understand your question, next time please write full sentences.
But I think I understood what you want to achieve.You can't just keep open divs, you have to close them. after the div just write </div>.If you open a div inside a div at least have some styling or other content, beside the inner-div, inside the parent-div.Fix those and it will work for you.
Here is the fixed code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type='button' value='Add' onclick='AddEl()' />
<div style='position:relative;background-color:Red'>
01
</div>
<div id='Content' style='position:relative;background-color:Green'>
</div>
<div style='position:relative;background-color:Blue'>
Hagh
</div>
</body>
<script>
function AddEl()
{
document.getElementById('Content').innerHTML='Ya';
}
</script>
</html>