I am a Javascript beginner, I am trying to get some simple code working. I added one snippet as a check to make sure Javascript is working in the page, which it does. It just changes a bit of text from blue to red.
The second piece of code is supposed to hide a <div>, or show it depending on the selected value. It does not work can somebody point me in the right direction? Thanks for any advice.
<!DOCTYPE html>
<html>
<head>
<title>getElementById example</title>
<script>
function changeColor(newColor) {
var elem = document.getElementById("para1");
elem.style.color = newColor;
}
</script>
<script>
// EXPAND
function Hide(elementid){
document.getElementById(elementid).style.display = 'none';
}
function Show(elementid){
document.getElementById(elementid).style.display = '';
}
</script>
</head>
<body>
<p id="para1">Some text here</p>
<button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button>
<div id="one">ONE</div>
<div id="two">TWO</div>
<select>
<Option value="javascript:Show('one');javascript:Hide('two')">one</option>
<Option value="javascript:Hide('one');javascript:Show('two')">two</option>
</select>
</body>
</html>
The value attribute does not run JavaScript.
You need to bind a change event to the select element, and then look at the selected value to determine which one to show or hide.
For example:
<div id="one">ONE</div>
<div id="two">TWO</div>
<div id="three">THREE</div>
<select>
<option>one
<option>two
<option>three
</select>
<script>
function show(id) {
document.getElementById(id).style.display = '';
}
function hide(id) {
document.getElementById(id).style.display = 'none';
}
function whichDiv(event) {
var select = event.target;
var options = select.options;
for (var i = 0; i < options.length; i++) {
var option = options[i];
if (option.selected) {
show(option.value);
} else {
hide(option.value);
}
}
}
document.querySelector('select').addEventListener('change', whichDiv);
</script>
I think you should use block : document.getElementById(elementid).style.display = 'block';
Related
This code is supposed to be looping and adding multiple divs, but it isn't working. When I click it, only one div appears. If I click again, nothing happens.
<body>
<div class="start" >
<div id = "coba">
</div>
<div id = "cobi">
</div>
</div>
<script>
var divs = document.getElementById("coba").addEventListener("click", function () {
for (var i = 1; i < 100; i++) {
var di = document.createElement('div');
document.getElementById('coba').appendChild(di);
}
});
</script>
</body>
Thanks for your help
Your code does not work because you did not do anything with the variable "i" in the for statement. If you look at the fiddles of user2181397 & meghan Armes you will see how they added a line in the script to put it to work.
I tested the below in my IDE and it works just fine:
<body>
<div class="start" style="margin-top:50px; color:black;">
<div id = "coba">
<p>Click Me</p>
</div>
<div id = "cobi">
</div>
</div>
<script>
var divs = document.getElementById("coba").addEventListener("click", function() {
for (var i = 1; i < 100; i++) {
var di = document.createElement('div');
di.innerHTML=i;
document.getElementById('coba').appendChild(di);
}
});
</script>
</body>
Basically been trying to figure out some javascript stuff, so was making a couple of divs, and a select, so depending on the selected option, depends on what div is shown/hidden.
It seems to work ok, hiding all but the first div after loading, then when the second option is selected, it shows the second div, hiding the first by appending a class.
When I change the option back to the first div though, it creates a long running script that jams everything up and I can't figure out where the long running script comes from.
Any advice appreciated.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.itemCont.show{
display:block;
}
.itemCont.hide{
display:none;
}
</style>
</head>
<body onload="sortDivs();">
<select name="options" id="opts" onchange="optSelect(this);">
<option value="0">item</option>
<option value="1">another</option>
</select>
<div class="output">
<div class="itemCont show" id="div0">
<h1>1</h1>
</div>
<div class="itemCont" id="div1">
<h1>2</h1>
</div>
</div>
</body>
<script async="async" ype="text/javascript">
function sortDivs(){
var divs = document.getElementsByClassName('itemCont');
for( var i = 0; i < divs.length; i++ ){
if(i>0){
divs[i].className += ' hide';
}
}
}
function optSelect(opt){
var val = opt.value;
var divs = document.getElementsByClassName('itemCont');
var divActive = document.getElementsByClassName("itemCont show");
divActive[0].className = divActive[0].className.replace(/\bshow\b/,'hide');
for ( var i = 0; i < divs.length; i++ ) {
if(i = val){
divs[i].className = divs[i].className.replace(/\bhide\b/,'show');
}
}
}
</script>
</html>
You have a typo = should be ==
for ( var i = 0; i < divs.length; i++ ) {
if(i == val){
divs[i].className = divs[i].className.replace(/\bhide\b/,'show');
}
}
I recommend using jQuery (toggle) to handle this kind of stuff though :)
I basically would like to disable the Rollout and rollover function after I clicked. I tried an if argument but I can't get it to work. Sorry I am a real beginner in this.
I already achieved to change a text with the click in mother div but still can't disable other functions.
<!DOCTYPE html>
<html>
<head>
<link href="styles/main.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<script>
var Enabled = true;
function down()
{
document.getElementById("button").src = "images/click.png"; }
var Enabled = true;
function rollover()
{
if(Enabled == true)
{
document.getElementById("button").src = "images/on.png";
}else
{
document.getElementById("button").src = "images/click.png";
}
}
var Enabled = true;
function rollout()
{
if(Enabled == true)
{
document.getElementById("button").src = "images/off.png";
}else
{
document.getElementById("button").src = "images/click.png";
}
}
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
<script/>
<body>
<h1>My Web Page</h1>
<div class="test1">
<button type="button" onclick="myFunction()">Try it</button>
</div>
<div class="row">
<div class="col"><p id="demo">A Paragraph</p></div>
<div class="col"><img src="images/off.png" id="button"
onMouseOver="rollover ()" onMouseOut="rollout ()"
onMouseDown="down()"
onClick="myFunction()"
onClick="this.innerHTML=down()
onMouseUp="rollover ()";/></div>
<div class="col">col3</div>
</div>
</body>
</html>
Check this out solution, When clicked it calls down() which sets Enabledto false and chages the image, now when you rollover and rollout it checks if Enabled is true, if it isn't it wont change the image.
function down(ele)
{
ele.src = "//placekitten.com/50/30"; //Clicked
Enabled = false; }
I found the hoooooly grail:)
Its a little tricky solution but works:)
I change the div instead of disabling the functions of the button states.
So here it is:
function showDiv() {
document.getElementById('button2').style.display = "block";
document.getElementById("button").style.display = "none";
}
Button2 is now the clicked button state, button is the div where all the other states are in. This way it stays in the clicked state after clicking and I get rid of the other button states after clicking:)
I am trying to hide the div's when different buttons are clicked but I don't know how to. (So when 'Test 1' is clicked it should hide 'Test 2' Div and vice versa) I checked here and on Google but couldn't find an answer for it.
Javascript :
function showHide(divId) {
var theDiv = document.getElementById(divId);
if (theDiv.style.display == "none") {
theDiv.style.display = "";
} else {
theDiv.style.display = "none";
}
}
HTML :
<input type="button" onclick="showHide('hidethis')" value="Test It">
<div id="hidethis" style="display:none">
<h1>TEST ME!</h1>>
</div>
<input type="button" onclick="showHide('hidethis2')" value="Test It 2">
<div id="hidethis2" style="display:none">
<h1>TEST MEEEEEEEEEEEEEEE 2!</h1>
</div>
JSFIDDLE: is not doing it here but works locallyhttp://jsfiddle.net/S5JzK/
<input type="button" onclick="showHide('hidethis')" value="Test It" />
<div id="hidethis" style="display:none">
<h1>TEST ME!</h1>
</div>
<input type="button" onclick="showHide('hidethis2')" value="Test It 2">
<div id="hidethis2" style="display:none">
<h1>TEST MEEEEEEEEEEEEEEE 2!</h1>
</div>
function showHide(divId) {
$("#"+divId).toggle();
}
Check the Fiddle http://jsfiddle.net/S5JzK/7/
Please try this, it works well and so simple,
<html>
<head>
<style>
.manageDiv{
display:none;
}
</style>
</head>
<body>
<input type="button" class="testButton" value="Test It" />
<input type="button" class="testButton" value="Test It 2" />
<div id="hidethis2" class="manageDiv">
<h1>TEST MEEEEEEEEEEEEEEE 2!</h1>
</div>
</body>
</html>
$(function(){
$(".testButton").on("click", function(){
$("#hidethis2").toggleClass("manageDiv");
});
});
To it work in fiddle, in your example, you need to select (No wrap - in head) on the left.
Look the example below, using pure javascript:
HTML
<input type="button" onclick="showHide('hidethis')" value="Test It">
<div id="hidethis" style="display:none">
<h1>TEST ME!</h1>
</div>
<input type="button" onclick="showHide('hidethis2')" value="Test It 2">
<div id="hidethis2" style="display:none">
<h1>TEST MEEEEEEEEEEEEEEE 2!</h1>
</div>
JAVASCRIPT
function showHide(divId) {
/* Hide all divs */
var elements = document.getElementsByTagName('div');
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = "none";
}
/* Set display */
var theDiv = document.getElementById(divId);
theDiv.style.display = "";
}
http://jsfiddle.net/S5JzK/9/
ANOTHER JAVASCRIPT EXAMPLE
function showHide(divId) {
/* Hide the divs that you want */
var div1 = document.getElementById('#hidethis');
var div2 = document.getElementById('#hidethis2');
div1.style.display = "none";
div2.style.display = "none";
/* Set display */
var theDiv = document.getElementById(divId);
theDiv.style.display = "";
}
Using JQuery:
function showHideDiv(divId, bShow) {
if (bShow) {
$("#" + divId).show();
} else {
$("#" + divId).hide();
}
}
your code seems fine. are you sure you enter the function upon click? try adding a breakpoint using developer tools or an alert.
Anyways, I see you tagged this post with jquery. you can you it to do the task more elegantly.
$("#" + theDiv).hide();
or for showing it:
$("#" + theDiv).show();
"JSFIDDLE: is not doing it here but works locally"
Yes, because by default jsfiddle wraps your JS in an onload handler, which means the function declaration is local to that handler. Inline html attribute event handlers like your onclick="showHide('hidethis')" can only call global functions.
Under jsfiddle's Frameworks & Extensions heading there's a drop-down where you can change the default "onload" to "No wrap - in head" (or "No wrap - in body"). That'll make your function declaration global as in your local implementation.
Demo: http://jsfiddle.net/S5JzK/8/
When I click on the div, it should open. When I click again, it should close the div. Please help me on this.
<html>
<head>
<script type="text/javascript">
var bool = 0;
function showDiv(){
if(bool==1){
bool=0;
document.getElementById(show).style.visibility = "hidden";
}else if(bool==0){
bool=1;
document.getElementById(show).style.visibility = "visible";
}
}
</script>
</head>
<body>
<input type="button" value="click" onclick="showDiv();" />
<div="show">
<p>it is okay it is okay it is okay it is okay it is okay it is okay it is okay it is okay</p>
</div>
</body>
</html>
You're missing the quotes for the id argument for getElementById()
document.getElementById('show').style.visibility = "hidden";
Also the id attribute name is missing on the <div>
<div="show">
Should be this:
<div id="show">
jsFiddle
Try this:
HTML
<button id="myButton">Show DIV</button>
<div id="show" class="hidden">
<p>it is okay </p>
</div>
CSS
.hidden
{
display:none;
}
JS
$('#myButton').click(function () {
$("#show").slideToggle();
$(this).text($(this).text() == 'Show DIV' ? 'Hide DIV' : 'Show DIV');
return false;
});
Here's the jsfiddle: http://jsfiddle.net/mgrcic/RbjLJ/
When you are referring to
document.getElementById(show).style.visibility
The show refers to a variable, but you are trying to get it as a string, so you should get it quoted
document.getElementById('show').style.visibility
You are writing the div wrong. You should put "show" as the value of your Id attribute:
<div id="show"> </div>
If you use jQuery (you tagged it), why not use jQuery to get things done more cleanly, in an unobtrusive way ?
$(function(){
var bool = 0;
$("input[type='button']").click(function(){
if(bool ==0)
{
bool =1
$("#show").hide();
}
else
{
bool =0
$("#show").show();
}
});
});
Here is the sample: http://jsfiddle.net/sHsuh/10/
Note that this script will bind the function to all button elements in your page. So I would be more specific by adding an Id to my Button and bind with that:
$("#myButtonId").click(function(){
//code goes here
});
Here is the solution, you couldn't get your element without specifying div id="theid":
<html>
<head>
<script type="text/javascript">
var bool = 0;
function showDiv(){
var elem = document.getElementById('show');
console.log(elem);
if(bool==1){
bool=0;
elem.style.visibility = "hidden";
}else if(bool==0){
bool=1;
elem.style.visibility = "visible";
}
}
</script>
</head>
<body>
<input type="button" value="click" onclick="showDiv();" />
<div id="show">
<p>it is okay it is okay it is okay it is okay it is okay it is okay it is okay it is okay</p>
</div>
</body>
</html>
You have made some mistakes:
<div="show"> is wrong. The correct way is <div id="show">.
If you want show and hide means, first set your div's CSS to visibility:hidden;.
You are missing an apostrophe in document.getElementById('show');.
Try this:
<html>
<head>
<script type="text/javascript">
var bool = 0;
function showDiv(){
if(bool==1){
bool=0;
document.getElementById('show').style.visibility = "hidden";
}else if(bool==0){
bool=1;
document.getElementById('show').style.visibility = "visible";
}
}
</script>
</head>
<body>
<input type="button" value="click" onclick="showDiv();" />
<div id="show" style=" visibility:hidden;">
<p>it is okay it is okay it is okay it is okay it is okay it is okay it is okay it is okay</p>
</div>
</body>
</html>