I'm writing some simple code to change the visibility of an image when a button is clicked, but my document.getElementById().value is coming up as undefined. (I've tried replacing .value with .display - same result).
What could be the problem?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script>
function hideImage(imageId){
document.getElementById(imageId).visibility="hidden";
}
function showImage(imageId){
document.getElementById(imageId).visibility="visible";
}
function switchVis(imageId){
var curVis = document.getElementById(imageId).value;
if(document.getElementById(imageId).value=="hidden"){
document.getElementById("output").innerHTML="hidden";
showImage(imageId);
}
else if(document.getElementById(imageId).value=="visible"){
hideImage(imageId);
document.getElementById("output").innerHTML="visible";
}
else{
alert("Visibility Issue!\nVisibility value is " + curVis);
}
}
</script>
</head>
<body>
<img src="images/k3.gif" id="k3"><p>
<button onclick=switchVis('k3')>Visibility</button>
<div id="output"></div>
</body>
You cannot simply get style value by using document.getElementById().value . getComputedStyle() gives the final used values of all the CSS properties of an element. The returned style is a CSSStyleDeclaration object which can be used to get the value of your style. Try follwing code. It should work.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script>
function hideImage(imageId){
document.getElementById(imageId).style.visibility="hidden";
}
function showImage(imageId){
document.getElementById(imageId).style.visibility="visible";
}
function switchVis(imageId){
var curVis = document.getElementById(imageId); //your element
style = window.getComputedStyle(curVis); //returns CSSStyleDeclaration object
curVis = style.getPropertyValue('visibility'); //now get your css value
if(curVis=="hidden"){
document.getElementById("output").innerHTML="visible";
showImage(imageId);
}
else if(curVis=="visible"){
hideImage(imageId);
document.getElementById("output").innerHTML="hidden";
}
else{
alert("Visibility Issue!\nVisibility value is " + curVis);
}
}
</script>
</head>
<body>
<img src="images/k3.gif" id="k3" value="check"><p>
<button onclick="switchVis('k3')">Visibility</button>
<div id="output"></div>
</body>
You can get visibility like that: jsfiddle
So it's in document.getElementById('myId').style.visibility
//to make visible
document.getElementById('myId').style.visibility='visible'
//to make hidden
document.getElementById('myId').style.visibility='hidden'
Instead of value you used there's innerHTML. Value is for input elements.
try this
to show
document.getElementById('k3').style.visibility='visible';
to hide
document.getElementById('k3').style.display='none';
refer this for better idea
Add visibility property in img tag.
visibility="visible"
2.Also check visibility value with following.
document.getElementById(imageId).style.visibility=="visible"
Use same thing in hideImage and showImage function.
Related
<!DOCTYPE html>
<html>
<head>
<title>switch</title>
<script language="javascript" type="text/javascript">
function click_turn() {
if (document.getElementById("light").src == "/pic_bulboff.gif") {
document.getElementById("light").src = "/pic_bulbon.gif";
}
else {
document.getElementById("light").src = "/pic_bulboff.gif";
}
}
</script>
</head>
<body>
<img id="light" src="/pic_bulboff.gif" />
<br />
<button id="click" onclick="click_turn()">Click</button>
</body>
</html>
The button doesn't work, that is the light bulbs doesn't turn on. I searched in Google and didn't find any solution. What did I do wrong?
The HTMLMediaElement.src property reflects the value of the HTML media element's src attribute, which indicates the URL of a media resource to use in the element.
Instead of using src property, you should be using getAttribute to read the attribute of the Element which would not be URL but a value assigned.
function click_turn() {
if (document.getElementById("light").getAttribute('src') == "pic_bulboff.gif") {
document.getElementById("light").setAttribute('src', "pic_bulbon.gif")
} else {
document.getElementById("light").setAttribute('src', "pic_bulboff.gif")
}
}
<base href="https://www.w3schools.com/js/">
<img id="light" src="pic_bulboff.gif" />
<br />
<button id="click" onclick="click_turn()">Click</button>
using img.src will return an absolute path not a relative path so the document.getElementById("light").src will never equal to /pic_bulboff.gif. You can also add the baseurl to your logic or use .includes("") instead:
function click_turn() {
if (document.getElementById("light").src.includes("pic_bulboff.gif") {
document.getElementById("light").src = "/pic_bulbon.gif";
}
else {
document.getElementById("light").src = "/pic_bulboff.gif";
}
}
document.getElementById("light").src returns the full path ('http://etc').
try document.getElementById("light").src.endsWith("/pic_bulboff.gif")
Well, I replaced "==" by "endsWith" and it worked. Thank you for all the help.
I created a button that uses function fontColor to activate the id= "main header". I'm trying to get the parameters of function to accept arguments to adjust the font size and color in the id="Main Header". Can I get some help with this? Thanks.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="script.js"></script>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<button type="button" onClick="fontColor(30,"blue");" id="push">Change.</button>
<h1 id="Main Header"> HI</h1>
<p id="this one">Hello World</p>
</body>
</html>
function fontColor(s, c) {
var size = element.style.fontsize(s);
var color = element.style.color(c);
var result = [size, color];
document.getElementById("Main Header").innerHTML = result;
}
Just set the id to a variable, and change it from there. Also, as the other user said, fontSize should be suffixed with px
function fontColor(s, c) {
var changing = document.getElementById("Main Header");
changing.style.fontSize = s;
changing.style.color = c;
}
Camel-case element.style.fontSize
I could be wrong but also I believe element.style.fontSize needs a string so fontColor("30px","blue")
EDIT: element is undefined and there's more errors than I previously thought. I couldn't just tell you how to fix the errors so I just rewrote your function.
A better solution would be:
function fontColor(s, c) {
var element = document.getElementById("MainHeader"); <- should be one word
element.style.fontSize = s;
element.style.color = c;
}
This has been asked 100x before but after reading a lot of those posts I'm still not sure what I'm doing wrong. The script is only executed when you press the button (so the textbox should exist in the DOM by the time the code is executed), Visual Studio even lets me autocomplete the getElementByID argument to inputField. Yet somehow it doesn't get the element and 'null' is printed on my screen.
My code is:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!-- input field + button, and an empty value field -->
<input type="text" id="inputField" value="" />
<input type="button" onclick="printType()" />
</body>
<script>
function printType() {
console.log(document.getElementById(inputField).value); //first try to get the value the regular way
console.log(
get_type(
document.getElementById(inputField)
)
); //also try get_type to see if it exists, we're expecting a string
}
//stole this function from a stackoverflow post
function get_type(thing) {
if (thing === null) return "[object Null]"; // special case
return Object.prototype.toString.call(thing);
}
</script>
</html>
You're missing quotes:
document.getElementById(inputField);
Should be:
document.getElementById('inputField');
Based on #Schlaus answer, I created a jsfiddle with correct answer.
function printType() {
console.log(document.getElementById('inputField').value); //first try to get the value the regular way
console.log(
get_type(
document.getElementById('inputField')
)
); //also try get_type to see if it exists, we're expecting a string
}
I have a simple javascript code which sets a div's display = "block" then display="" (an empty value) but when I try to get value of display style using both Jquery and native javascript, both returns value as "block" after resetting it to a blank value.
How can I get the proper value(blank value) using any of these two?
I need to set it to blank instead of 'none', as it has been used in the product at thousands of places.
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.0.js"></script>
<script type="text/javascript">
function getDivStyle(){
var myDiv = document.getElementById("testDiv");
var before = $('#testDiv').css('display');
$('#testDiv').css('display', '');
var after = $('#testDiv').css('display');
var computed = getComputedStyle(myDiv).getPropertyValue("display");
console.log("before-> " + before +" ---- after-> "+ after+" ---- computed-> " + computed);
};
</script>
</head>
<body>
<div id="testDiv" style="display:block; height:100px; width:500px; border: 1px solid red;">
test div
</div>
<input value="get style" type="button" onclick="getDivStyle()"></input>
</body>
</html>
Got it, as per all the comments above, the proper way to set turn off display is to set display = "none". But in this case, if it is set to a blank value to get the value we can use
element.style.display;
as this returns a blank value.
The Syntax for display is
display: value;
If you do not want your element to be displayed then you need to change it to none or any other value you want. If you set it to blank then it will take the default value.
Edit:
This seems to work
document.getElementById("testDiv").style.display
<head>
function productName(name)
{
}
</head>
<body>
<img src="...images/car.jpg" onclick="productName('car')">
</body>
What I should write in this javascript function to print the value received from the onclick method to any public place in my html body?
Say you have an element like this:
<div id="content">
</div>
your js function would be like this:
<script type="text/javascript">
function productName(name)
{
document.getElementById('content').innerHTML = name;
}
</script>
You can create a textNode and append it to the body
function productName(name) {
var t=document.createTextNode(name);
document.body.appendChild(t)
}
Demo: Fiddle
Or in jQuery,
$('#content').html( name); // inner HTML of an element, by ID
$('#inputField').val( name); // into an INPUT.