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:)
Related
var btnform = document.getElementById('clicktoadd');
var btnlist = document.getElementById('clicktoshow');
var rem = document.getElementById('main');
var cancelform;
var submit;
function addformtopage() {
var form = document.createElement('div');
form.setAttribute("id", "remform");
form.innerHTML += "<div id=\"lblname\">Product Name:</div><input id=\"inpname\" type=\"text\"><div id=\"chkname\" style=\"visibility: hidden\">Enter a Product Name</div><div id=\"lbldesc\">Description:</div><textarea id=\"inpdesc\" rows=\"10\" cols=\"35\"></textarea><div id=\"chkdesc\" style=\"visibility: hidden\">Enter a Product Desciption</div><div id=\"lblprice\">Price in INR:</div><input id=\"inpprice\" type=\"number\"><div id=\"chkprice\" style=\"visibility: hidden\">Enter a Product Price</div><div id=\"lblqty\">Quantity:</div><input id=\"inpqty\" type=\"number\"><div id=\"chkqty\" style=\"visibility: hidden\">Enter a Product Quantity</div><button id=\"submitproduct\">Submit</button><button id=\"cancel\">Cancel</button>";
cancelform = document.getElementById('cancel');
submit = document.getElementById('submitproduct');
document.getElementById('panel').appendChild(form);
}
function removebuttons() {
rem.setAttribute("hidden", true);
}
function showbuttons() {
rem.removeAttribute("hidden", false);
}
btnform.addEventListener('click', function() {
addformtopage();
removebuttons();
});
cancelform.addEventListener('click', function() {
showbuttons();
});
submit.addEventListener('click', function() {
});
<!DOCTYPE HTML>
<html>
<head>
<link href="style.css" rel="stylesheet" />
<title>
JS Form
</title>
</head>
<body>
<div id="main">
<p><button id="clicktoadd">Add Product</button> <button id="clicktoshow">Show List</button></p>
</div>
<div id="panel">
</div>
<div id="listing">
</div>
<script src="script.js"></script>
</body>
</html>
I am new to javascript and trying this small project in which I am adding HTML elements to HTML file. At first, the page shows two buttons. Then after we click on "Add Product", the form just added is displayed and the buttons previously showed are hidden. I have to add validation in the form but I haven't reached that step now. Right now the buttons in the form are not working as expected. Well, they are not working at all. Can someone tell me the problem in the code? Help will be highly appreciated.
You will have to wait for the elements to be added to the DOM before you can query for them.
var btnform = document.getElementById('clicktoadd');
var btnlist = document.getElementById('clicktoshow');
var rem = document.getElementById('main');
var cancelform;
var submit;
function addformtopage() {
var form = document.createElement('div');
form.setAttribute("id", "remform");
form.innerHTML += "<div id=\"lblname\">Product Name:</div><input id=\"inpname\" type=\"text\"><div id=\"chkname\" style=\"visibility: hidden\">Enter a Product Name</div><div id=\"lbldesc\">Description:</div><textarea id=\"inpdesc\" rows=\"10\" cols=\"35\"></textarea><div id=\"chkdesc\" style=\"visibility: hidden\">Enter a Product Desciption</div><div id=\"lblprice\">Price in INR:</div><input id=\"inpprice\" type=\"number\"><div id=\"chkprice\" style=\"visibility: hidden\">Enter a Product Price</div><div id=\"lblqty\">Quantity:</div><input id=\"inpqty\" type=\"number\"><div id=\"chkqty\" style=\"visibility: hidden\">Enter a Product Quantity</div><button id=\"submitproduct\">Submit</button><button id=\"cancel\">Cancel</button>";
// This line needs to be before...
document.getElementById('panel').appendChild(form);
// ...these lines
cancelform = document.getElementById('cancel');
submit = document.getElementById('submitproduct');
}
function removebuttons() {
rem.setAttribute("hidden", true);
}
function showbuttons() {
rem.removeAttribute("hidden", false);
}
btnform.addEventListener('click', function() {
addformtopage();
removebuttons();
// Since cancelform & submit are created inside the addformtopage method
// These method calls needs to be inside the event handler.
// Otherwise both cancelform & submit would be undefined, and you can't call methods on an undefined value
cancelform.addEventListener('click', function() {
showbuttons();
});
submit.addEventListener('click', function() {
});
});
<div id="main">
<p>
<button id="clicktoadd">Add Product</button>
<button id="clicktoshow">Show List</button>
</p>
</div>
<div id="panel"></div>
<div id="listing"></div>
Here is a sample how use add event listeners to buttons:
document.querySelector('#clicktoadd').addEventListener('click',() => {
console.log('add button clicked')
})
document.querySelector('#clicktoshow').addEventListener('click',() => {
console.log('show button clicked')
})
<!DOCTYPE HTML>
<html>
<head>
<link href="style.css" rel="stylesheet" />
<title>
JS Form
</title>
</head>
<body>
<div id="main">
<p><button id="clicktoadd">Add Product</button> <button id="clicktoshow">Show List</button></p>
</div>
<div id="panel">
</div>
<div id="listing">
</div>
</body>
</html>
strong text
Some logic error here
cancelform = document.getElementById('cancel');
submit = document.getElementById('submitproduct');
document.getElementById('panel').appendChild(form);
cancelform and submit will return null because form is yet to added to the document.
I want to make a button (out of divs) and a paragraph (or any text field) below the divs that counts the clicks.
$(document).ready(function() {
$('#butt').mousedown(function() {
$("#butt").hide();
});
$("#pushed").mouseup(function() {
$("#butt").show();
});
$("#butt").click(function() {
button_click();
});
});
var clicks = 0;
function button_click() {
clicks = parseInt(clicks) + parseInt(1);
var divData = document.getElementById("showCount");
divData.innerHTML = "Clicks:" + clicks;
}
<!-- <link type="text/css" rel="stylesheet" href="CSS.css"/> -->
<form name="ButtonForm">
<div id="container">
<div id="pushed"></div>
<div id="butt"></div>
</div>
<div id="showCount"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
<!--<script src="Untitled-1.js" type="text/javascript"></script>-->
</form>
Your div elements are empty and there is no CSS to give them any explicit size, so they will never be visible for you to click on them.
Also, the mousedown event handler can and should be combined with the click handler for butt and the mouseup event handler should just be a click event as well.
Additionally, you only need to update the number of clicks, not the word "Clicks", so make a separate placeholder for the number with a span element and then you can hard-code the word "Clicks" into the div.
Lastly, to increment a number by one, you can just use the pre or post-increment operator (++).
$(document).ready(function() {
var clicks = 0;
var divData = $("#clickCount");
$("#pushed").on("click", function() {
$("#butt").show();
});
$("#butt").on("click", function() {
$("#butt").hide();
clicks++; // increment the counter by one
divData.html(clicks);
});
});
#pushed, #butt {height:50px; width:150px; background-color:green; margin:5px;}
<body>
<form name="ButtonForm">
<div id="container">
<div id="pushed"></div>
<div id="butt"></div>
</div>
<div id="showCount">Clicks <span id="clickCount"></span></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
</form>
</body>
First of all, you should simplify your code. Hiding and showing the button is not necessary to produce the result you are looking for.
Second, change the #butt element to an actual button so that you have something to see and click.
Third, make sure your script is loading after jquery is included.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
<button id="butt">I'm a button</button>
<div id="showCount"></div>
<script>
$(document).ready(function() {
$("#butt").click(function() {
button_click();
});
var clicks = 0;
function button_click() {
clicks = parseInt(clicks) + parseInt(1);
var divData = document.getElementById("showCount");
divData.innerHTML = "Clicks:" + clicks;
}
});
</script>
I've multiple buttons with related text to each button, when user click on the button, the text should change according to button and text should be displayed in the DIV.
I'm using if elseif to choose between the text for each button, now I'm unable to go through the function to pass the text to the div onclick().
<html>
<head>
function display (selected) {
if (decision == firstbox) {
display = "the text related to first box should be displayed";
} else if (decision == secondbox) {
display = "Text related to 2nd box.";
} else {
display ="blank";
}
</head>
<body>
<input type="button" id="firstbox" value= "firstbox" onclick="display(firstbox)" /><br>
<input type="button" id="secondbox" value= "secondbox" onclick="display(firstbox)" /><br>
</body>
</html>
Pure javascript from your code:
function display (selected)
{
if (selected == 'firstbox')
{
texttoshow = "the text related to first box should be displayed";
}
else if (selected == 'secondbox')
{
texttoshow = "Text related to 2nd box.";
}
document.getElementById("thetext").innerHTML = texttoshow;
}
And the html:
<body>
<div id = "thetext"></div>
<button onclick = "display(firstbox)">Firstbox</button>
<button onclick = "display(secondbox)">Secondbox</button>
</body>
For what is worth it, in jQuery (a javascript framework):
$("#buttonclicked").
click(function(){
$("#yourdiv").
html("Your text");
});
This should do what you want
<button type="button" id="button-test">Text that will apear on div</button>
<div id="content">
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#button-test').click(function(){
$('#content').text($(this).text());
});
});
</script>
http://remysharp.com/2007/04/12/jquerys-this-demystified/
http://api.jquery.com/text/
Here I am going to provide you to examples in one. One of them use div and the other don't, one using a link and the other using a button that need to be clicked.
<!DOCTYPE html>
<html>
<body>
<h2>Displaying text when clicked</h2>
<button type="button"
onclick="document.getElementById('demo').innerHTML = 'These are the steps to get your PIN number: Bla bla bla'">
PIN button:</button>
<p id="demo"></p>
</br></br></br>
<a onclick="showText('text1')" href="javascript:void(0);">PIN link:</a>
<script language="JavaScript">
function showText(id)
{
document.getElementById(id).style.display = "block";
}
</script>
<div id="text1" style="display:none;">These are the steps to get your PIN number: Bla bla bla</div>
</body>
</html>
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';
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>