When I use document.getElementById().textContent to set the "text content" to the value of a variable it doesn't work it doesn't to anything instead changing the text content to the value of the variable. It does work when I use
.textContent = "example";
but not
.textContent = example;
Here is my HTML
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script language="javascript" type="text/javascript" src="testScript.js"></script>
</head>
<body>
<p class="heading">Heading</p>
<p id="TextSpace"></p>
</body>
Here is my JS
//Get users name
var name = prompt("What is you name");
//put the name in the element "text space"
document.getElementById("TextSpace").textContent = name;
The prompt appears but after that nothing happens
Move the script
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p class="heading">Heading</p>
<p id="TextSpace"></p>
<script language="javascript" type="text/javascript" src="testScript.js"></script>
</body>
or add an onload handler
window.onload = function() {
var name = prompt("What is you name");
document.getElementById("TextSpace").textContent = name;
}
Right now the script is running before the elements in the DOM are available.
Note that textContent is not available in IE8 and below.
Instead of putting the script tag at the bottom, you can just put defer and it will work perfectly fine
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script language="javascript" type="text/javascript" src="testScript.js" defer></script>
</head>
<body>
<p class="heading">Heading</p>
<p id="TextSpace"></p>
</body>
Related
I am trying to display an iframe when a button is clicked. I got the following JS code:
function show() {
var iframe1 = document.getElementById('iframe');
iframe1.style.display = 'block';
}
and here is the HTML of my page:
<!DOCTYPE html PUBLIC>
<html>
<head>
<title>Welcome</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="global.css"/>
<link rel="stylesheet" type="text/css" href="buttons.css"/>
<link rel="stylesheet" type="text/css" href="paragraphs.css"/>
<link rel="stylesheet" type="text/css" href="iframes.css"/>
<script type="text/javascript" src="files.js"></script>
</head>
<body>
<form> <button id="files" onclick="show()">Files</button> </form>
<iframe id="iframe" src="files.html" width="200" height="100"></iframe>
</body>
</html>
The script is inside an external file named files.js. When I test the code, it works, but the iframe only shows for 1 milisecond. What's wrong?
Thanks in advance for your answers!
Add type="button" to your <button>. As it is right now, it is inside a form, and without any type attribute — that way it defaults to type submit, so when you click it, the page is submitted and disappears.
Also, change onclick="show()" to onclick="show", or better yet — use .addEventListener() instead.
function show() {
var iframe1 = document.getElementById('iframe');
iframe1.style.display = 'block';
}
<!DOCTYPE html PUBLIC>
<html>
<head>
<title>Welcome</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="global.css"/>
<link rel="stylesheet" type="text/css" href="buttons.css"/>
<link rel="stylesheet" type="text/css" href="paragraphs.css"/>
<link rel="stylesheet" type="text/css" href="iframes.css"/>
<script type="text/javascript" src="files.js"></script>
</head>
<body>
<form> <button type="button" id="files" onclick="show">Files</button> </form>
<iframe id="iframe" src="files.html" width="200" height="100"></iframe>
</body>
</html>
EDIT: Additional code in response to OP's comment:
var iframeShowing = false;
function show() {
var iframe1 = document.getElementById('iframe');
iframe1.style.display = iframeShowing ? 'block' : 'none';
iframeShowing = !iframeShowing;
}
The form is causing a page reload. You can stop that by simply adding a event.preventDefault(). function show(e) { e.preventDefault(); ...
However, you will need to inject the event parameter in the function call.
onclick="show(event)"
Another option you have is just remove the form tag and keep the button tag. That should do the trick.
I am a beginner to javascript. I am currently learning it.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Using Javascript</title>
<meta http-equiv="author" content="#infinity">
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<h1>Elderflower</h1>
<script src="javascript.js"></script>
<div id="content">
<h2>Custom Signage</h2>
<div id="cost">Cost: $5 per tile</div>
</div>
</body>
</html>
Javascript:
var number;
var costOne;
var totalCost;
number=5;
costOne=2;
totalCost=number*costOne;
var el=document.getElementById('cost');
el.textContent=totalCost;
Now I think that this should work, but its not working. The text of the <div id="cost"> remains same.
Please help.
Most likely you are trying to update the DOM even before it is loaded - you can make sure the javascript is executed after the DOM is loaded by keeping JS at the end of the body tag like below -
<!DOCTYPE html>
<html>
<head>
<title>Using Javascript</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<h1>Elderflower</h1>
<div id="content">
<h2>Custom Signage</h2>
<div id="cost">Cost: $5 per tile</div>
</div>
<script>
var number;
var costOne;
var totalCost;
number=5;
costOne=2;
totalCost=number*costOne;
var el=document.getElementById('cost');
el.textContent=totalCost;
</scirpt>
</body>
</html>
Start reading from here about Window load vs DOM load events
So I am working on a simple image cropping function using pre-built Yahoo UI. However, it seems the cropping box or whatever it is called lies under the image, or maybe it's just transparent.
Here is my code, you can just copy and paste to inspect.
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/assets/skins/sam/resize.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/assets/skins/sam/imagecropper.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/resize/assets/skins/sam/resize.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/imagecropper/assets/skins/sam/imagecropper.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/resize/resize-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/imagecropper/imagecropper-min.js"></script>
<img id="yui_img" src="http://developer.yahoo.com/yui/examples/imagecropper/assets/yui.jpg">
<script>
(function(){var crop = new YAHOO.widget.ImageCropper('yui_img');})();
</script>
Here is the URL to the demo Yahoo provides
http://developer.yahoo.com/yui/examples/imagecropper/simple_crop_clean.html
Please help me. Thanks in advance!
This is the code that was working for me
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Simple Crop Interface</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/resize/assets/skins/sam/resize.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/imagecropper/assets/skins/sam/imagecropper.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/resize/resize-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/imagecropper/imagecropper-min.js"></script>
<!--there is no custom header content for this example-->
</head>
<body class="yui-skin-sam">
<h1>Simple Crop Interface</h1>
<div class="exampleIntro">
<p>This example shows how to make an image croppable.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<img id="yui_img" src="http://developer.yahoo.com/yui/examples/imagecropper/assets/yui.jpg">
<script>
(function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
var crop = new YAHOO.widget.ImageCropper('yui_img');
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>
When I removed the last script ie
<script>
(function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
var crop = new YAHOO.widget.ImageCropper('yui_img');
})();
</script>
This code then the box dissappeared please check with your code. Maybe the javascript is essential or maybe ur missing some thing else. Better to keep all the js and css and try debugging removing one by one. You will get to know the specific point. And my code is hopefully working please let me know if it isn't. :)
My options.html:
<!doctype html>
<html>
<head>
<title>Item Notifier v1.0.2</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="jquery.js"></script>
<script src="options.js"></script>
</head>
<body>
<h1>Cowboy's Item Notifyer</h1>
<label>Last updated hat:<h2 id='itemname'>[ loading... ]</h2></label>
</body>
</html>
Then my options.js:
$(document).ready(function() {
$('#itemname').html() = localStorage.mostRecentHat;
});
It's supposed to change the innerHTML from [ loading... ] to the value of mostRecentHat but it turns up the value as undefined and doesnt change the innerHTML.
You should pass the value as a parameter to html method.
$(document).ready(function() {
$('#itemname').html(localStorage.mostRecentHat);
// document.getElementById('itemname').innerHTML = localStorage.mostRecentHat;
});
I want to make a javascript file uploader. The location of css for this uploader is "~/Scripts/fileuploader/fileuploader.css" and the js location is "~/Scripts/fileuploader/fileuploader.js" . I want to do the following:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="~/Scripts/fileuploader/fileuploader.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="demo"></div>
<ul id="separate-list"></ul>
<script src="~/Scripts/fileuploader/fileuploader.js" type="text/javascript"></script>
<script>
function createUploader() {
var uploader = new qq.FileUploader({
element: document.getElementById('demo'),
listElement: document.getElementById('separate-list'),
action: '~/Scripts/fileuploader/do-nothing.htm'
});
}
window.onload = createUploader;
</script>
</body>
</html>
However, <link href="~/Scripts/fileuploader/fileuploader.css" and <script src="~/Scripts/fileuploader/fileuploader.js" become http://localhost:1304/Administration/blue/en-gb/Entity/Index/~/Scripts/fileuploader/fileuploader.js?_=1325540158292
and http://localhost:1304/Administration/blue/en-gb/Entity/Index/~/Scripts/fileuploader/fileuploader.js?
How can I change this so that it does ~/Scripts/fileuploader/fileuploader.js instead of http://localhost:1304/Administration/blue/en-gb/Entity/Index/~/Scripts/fileuploader/fileuploader.js
Why do you need to put that ~ symbol to there? If your html file (or php I don't know) are at the place where that you mean with that ~ symbol, deleting ~/ symbols will solve the problem.
<link href="Scripts/fileuploader/fileuploader.css" rel="stylesheet" type="text/css">
<script src="Scripts/fileuploader/fileuploader.js" type="text/javascript"></script>