This code is meant to display items items as a list in the div above the button but, although the button and prompt work, there is no text displayed in the div. Help!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Shopping List</title>
<style>
#button {
width:80px;
height:30px;
}
div.ex {
width:500;
height:500;
}
</style>
<script>
function a() {
var thing = prompt('Insert an item or press cancel');
if (thing != null && thing != undefined) {
document.getElementById('b') += thing;
}
else {
}
}
</script>
</head>
<body>
<div class='ex' style="color:#007AFC"></div>
<button onclick='a()' id='button'>Add Item</button>
</body>
</html>
First of all, you are using document.getElementById('b') however you don't have an HTML element with id="b". Secondly, you can't change the HTML content of an element using only the += operator. You need to modify the innerHTML attribute like so:
document.getElementById('b').innerHTML += thing;
Also, you need to have an HTML element with id="b" like so:
<div id="b" class='ex' style="color:#007AFC"></div>
However, consider using a more descriptive name for the id.
Can you really add text with "+="!? I would try it using append()
And what sushain97 says: add a id to the element (id="b"). But if you want to add more items one after the other you need to use append(), not innerHTML(), because innerHTML() will replace all of the content.
html :
<div class='ex' style="color:#007AFC" id="b"></div>
js:
document.getElementById('b').innerHTML+=thing;
I have a fiddle that shows it working. The relevant javascript is as follows:
document.getElementById('addButton').addEventListener("click", addListItem, false);
function addListItem(){
var thing=prompt('Insert an item or press cancel') + "<br />";
if(thing!=null&&thing!=undefined){
document.getElementById('listDiv').innerHTML += thing;
}
}
Side note: Try to stay away from inline styles and scripting. It makes it more difficult to maintain.
Related
What I'm trying to accomplish is make a div visible when hovering over another using the .hover() method, addClass and removeClass. But what happens is that when I hover over the added div, it reads that I'm no longer hovering over the div specified (or at least that's what I assume) in the .hover() method. This causes the div to flash on and off the screen repeatedly. How can I fix this so this problem doesn't happen? Here is the code:
JS
$(document).ready(function(){
$('.building').hover(
function(){
var my_id = $(this).attr('id');
var my_balloon ="#" + my_id + '_balloon';
//console.log(my_balloon);
$(my_balloon).addClass('active');
},
function(){
var my_id = $(this).attr('id');
var my_balloon ="#" + my_id + '_balloon';
//console.log(my_balloon);
$(my_balloon).removeClass('active');
}
);
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function abc() {
document.getElementById("Div2").style.display="";
}
</script>
</head>
<body>
<div onmouseover="abc()">Div1</div>
<div id="Div2" style="display:none">Div2</div>
</body>
</html>
If the balloon overlaps the Div, it captures the event “onmouseover”.
If you don’t have to deal with it, you could use css rule to prevent any action
.balloon {
pointer-events: none;
}
This rule allows the event to pass through the balloon, as if it didn’t exist.
<html>
<head>
<style>
#container {position:relative;left:15%;}
#myImage {width:65%;height:280px;}
#text {padding-top: 50px;}
#textbox {width:65%;height:280px;position:absolute;top:0;left:0;}
</style>
</head>
<body>
<div id="container" onclick="changeImage()" >
<img id="myImage" src="C:\Documents and Settings\svarghe1\My Documents\Downloads\Jaguar_Xj_Saloon_4.jpgj_.jpg" alt="">
<div id="textbox">
<p style="color:white;text-align:center;margin-top:50px;"class="text">Jaguar_Xj_Saloon</p>
<script>
function changeImage() {
if (document.getElelmentById("container").innerHTML="myImage") {
container.appendChild(myImage)
} else {
container.appendChild(textbox)
}
}
</script>
</div>
</div>
</body>
</html>
Here, I am trying to create a script for Sharepoint site page to change an element in div from Image to textbox with Onclick or hover property. There might be a lot of mistakes as this is my first attempt on JS. I have also tried
<script>
function changeImage() {
var image= document.getElementById("myImage");
if (image=true) {
var element = document.getElementById("container");
var UImage = document.createElementById("myImage");
element.appendChild(UImage)
} else {
var element = document.getElementById("container");
var Utextbox = document.createElementById("textbox");
element.appendChild(UImage)
element.appendChild(Utextbox);
}
}
</script>
#container:hover #myImage{ display:none; }
I have tried the code above in CSS, instead of script. It didn't work. At the same time the code,
a:hover #box{ text-decoration: none;color:green;background-color: Turquoise;cursor:pointer }
Works really fine. Why is that? I have given class instead of id. It also didn't work. It works in ordinary HTML file. But can't get to work in Sharepoint site.
So, can you help?
Instead of appending Image and text box from the javascript, you can already write the html codes for both and do the hide/show according to your need. I think it will make things lot easier and neat.
As for the Hover property, you can attach event of hover with jquery.
You can check the following link: http://api.jquery.com/hover/
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" >
function changeTitle() {
if (document.getElementById('myText').value === "") {
document.getElementById('title').innerHTML = "Welcome to JavaScript";
alert("Enter a valid text title");
return;
} else {
document.getElementById('title').innerHTML = document.getElementById('myText').value;
}
}
</script>
</head>
<body>
<h1 id="title">Welcome to JavaScript</h1>
<p> Hello! This is my first JavaScript example on Microsoft Visual Studio Express Edition 2013.</p>
<p>
<input id="myText" type="text"/>
<input type="submit" onclick="changeTitle();" value="Click me!"/>
</p>
</body>
</html>
In this little example, I want to save the initial innerHTML of the h1 tag (id=title) to a variable after loading the page for the first time.
And then instead of the document.getElementById('title').innerHTML = 'Welcome to JavaScript' which is inside the if statement, I want to substitute that above mentioned variable with the phrase "Welcome to JavaScript".
My main intention is,
wwhenever some one leaves the textbox (id=myText) blank and click on the submit button, script should replace the innerHTML of the h1 tag (id=title) to the initial value that was there in the first page load and pop out that alert box. (Maybe user has changed the innerHTML of the h1 before, but the script should replace it to the initial value that was there in the first page load).
You can declare a hidden input.
<input type="hidden" id="initialTitle" value=""/>
and populate the hidden field value via body onload JS function like.
function setInitialTitle() { document.getElementById('initialTitle').value = document.getElementById('title').innerHTML }
<body onload="setInitialTitle()";>
And in changeTitle() function rewrite if block as.
document.getElementById('title').innerHTML = document.getElementById('initialTitle').value;
Just use onload="changeTitle()"
here is a demo: http://jsfiddle.net/nn007/cKk4U/1/
Try this instead of your body tag....
<body onload="changeTitle();">
I have a HTML-page with a lot of different DIVs in it and I want to print out the the DIV that the user has clicked in and hide all the rest.
Can someone tell me how to do this in Javascript please?
<html>
<head>
<title>Print Demo</title>
<script type="text/javascript">
<!-- MY JAVASCRIPT FUNCITON -->
</script>
</head>
<body>
<div id="div1">
Print the page with this div
</div>
<div id="div2">
Print the page with this div
</div>
<div id="div3">
Print the page with this div
</div>
</body>
</html>
This is just to extend pimvdb's answer.
jQuery:
$("a").on("click", function(){
$("div").hide();
$(this).parent().show();
});
Or as suggested:
$("a").on("click", function(){
$("div").hide();
$(this).closest("div").show();
});
Hiding an element means setting it's style.display property to "none". Showing means setting it to "block" for a div element.
In combination with getElementsByTagName, you could accomplish this: http://jsfiddle.net/b9cgM/.
function show(elem) {
// hide all divs initially
var allDivs = document.getElementsByTagName("div");
for(var i = 0; i < allDivs.length; i++) {
allDivs[i].style.display = "none";
}
// show the appropriate div
elem.parentNode.style.display = "block"; // parent of the <a> is the <div> to show
}
You could bind the event like <a href="#" onclick="show(this); return false;">. The element (this) is then passed to show.
As a side note, libraries such as jQuery make this even easier; you might want to check that out (though I don't recommend including it if the only use case would be this).
sorry, there is only window.print() for printing in js, which means you can only print the entire window. if you want some to be able to print your document, make it printable using CSS.
for instance, maybe you want your navigation to disappear for printing, but leave the title of your page there and the name of your web site and maybe a page URL (sometimes browsers like firefox cut those off if they are too long). and sometimes some sites take away the browser controls and make the mistake of leaving you with no print button - and it's an online purchasing site... it's happened before.
<style type="text/css">
#media print {
.boxGreen {
padding:10px;
border-color:green;
border-style:dashed;
border-width:thin;
}
}
#media screen {
.boxGreen {
padding:10px;
border-color:green;
border-style:dashed;
border-width:thin;
}
}
</style>
you CAN do an onclick="switchtodiv('someid')" and then after the divs do this:
<div onclick="switchtodiv('span1')">ClickMe<span id="span1">some content</span></div>
<div onclick="switchtodiv('span2')">ClickMe<span id="span2">some content</span></div>
<div onclick="switchtodiv('span3')">ClickMe<span id="span3">some content</span></div>
<!--you can generate these divs using a for statement...-->
<script type="text/javascript">
//switchdiv allows only 1 div tobe
function switchdiv(id) {
var ids=new Array('span1','span2','span3');
var i;
for (i=0; i < ids.length; i++) {
if (ids[i] == id) {
document.getElementById(ids[i]).style.visibility='visible';
document.getElementById(ids[i]).style.display='block';
} else {
document.getElementById(ids[i]).style.visibility='hidden';
document.getElementById(ids[i]).style.display='none';
}
}
}
</script>
You could use a javascript function like document.getElementById(id) to hide the two other divs
So in your function you could just use
function hide1() {
document.getElementById(div2).style.display = "none";
document.getElementById(div3).style.display = "none";
}
so, I have a div with stuff like <h2>s and <img>s in them, and I want it so that if a user doubleclicks on one of them (for example they double click on anything inside the <h2></h2> tags it will turn it into a textbox with <h2>title</h2> inside it...
I just can't figure out how to send to the javascript function what was double clicked on?
try if you are famous with jQuery:
$('#yourDiv *').dblclick(function(event)){
alert(event.target.html());
}
Here is a very bare example for single click:
<script type="text/javascript">
function foo(elem) {
elem.innerHTML = '<input type="text" value="' + elem.innerHTML + '">';
}
</script>
<h1 onClick="foo(this)">Hello</h1>
<h1 onClick="foo(this)">My</h1>
<h1 onClick="foo(this)">Friend</h1>
test live: http://jsfiddle.net/MsTzY/