I have been trying to get these functions to run in sequence using onclick for the first and ID for the second. What I am trying to do is have the the "loading" script run and then show the "result" after the "loading" timeout. Thanks in advance for the help.
HTML:
<input type="button" id="btn_copy" onclick="show()" />
</span><label>Result:</label>
<span type="text" id="result_paste"><img id="loading" src="ajax-loader.gif" style="display: none"></span>
<input type="text" id="result_copy">
JS:
function show() {
document.getElementById("loading").style.display = "block";
setTimeout("hide()", 1000);
}
function hide() {
document.getElementById("loading").style.display = "none";
}
$(function result() {
$('#btn_copy').on('click', function () {
var get_val = $('#result_copy').val();
if (!get_val) {
alert("Please Enter Some Value");
return false;
}
$('#result_paste').text(get_val);
});
});
Change setTimeout("hide()", 1000) to setTimeout(hide, 1000)
First of all, you have 2 click listeners on your button - one in html, another in JS. That's not usually a good idea, so let's remove html one.
Than, as it was pointed out, you need to pass function, not a string, to setTimeout: setTimeout(hide, 1000)
And finally, the logic on click should be:
Hide result container and show loading image.
Plan hiding the image and showing the container in 1 second.
Actually put the value into the container.
Here is a snippet:
function showLoading() {
document.getElementById("result_paste").style.display = "none";
document.getElementById("loading").style.display = "block";
}
function showResult() {
document.getElementById("result_paste").style.display = "block";
document.getElementById("loading").style.display = "none";
}
$(function init() {
$('#btn_copy').on('click', function () {
var get_val = $('#result_copy').val();
if (!get_val) {
alert("Please Enter Some Value");
return false;
}
showLoading();
setTimeout(showResult, 1000);
$('#result_paste').text(get_val);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="result_copy">
<input type="button" id="btn_copy" value="OK" />
<br/>
<label>Result:</label>
<div type="text" id="result_paste"></div>
<img id="loading" src="ajax-loader.gif" alt="loading" style="display: none">
(or here is a fiddle: https://jsfiddle.net/aofj25bv/3/)
function show() {
console.log('show')
document.getElementById("loading").style.display = "block";
setTimeout(() => hide(), 1000);
}
function hide() {
console.log('hide')
document.getElementById("loading").style.display = "none";
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<input type="button" id="btn_copy" onclick="show()" value="button">
</span><label>Result:</label>
<span type="text" id="result_paste"><img id="loading" src="ajax-loader.gif" style="display: none"></span>
Try to switch
setInterval("hide()", 1000);
By
setInterval(hide(), 1000);
Related
I'm trying to make a div appear and disappear using javascript, but it's not working.I've included the javascript file(where the function is),but I don't understand why it's not working.
When I press the button, nothing happens.
HTML code:
<script type="text/javascript" src="show_on_click.js"></script>
<div id="myDiv" style="display:none" class="answer_list">Button Test</div>
<input type="button" name="answer" onclick="ShowDiv()" value="Test"/>
JavaScript code:
function ShowDiv(){
document.getElementById("myDiv").style.display = 'block';
}
Try this:
<div id="myDiv" style="display:none" class="answer_list">Button Test</div>
<input type="button" name="answer" onclick="ShowDiv()" value="Test"/>
<script>
function ShowDiv(){
document.getElementById("myDiv").style.display = 'block';
}
</script>
There are one or both of two errors:
your src path for script is wrong
somewhere you redefine function for button
Another problem will be: you are only set display to block, not to none again.
Try this:
function ShowDiv() {
var element = document.getElementById("myDiv");
if (element.style.display === 'none') {
element.style.display = 'block';
} else {
element.style.display = 'none';
}
}
I'm trying to make a button that shows text and another that removes it, this is what I have done so far.
When i click the Click me! button text shows, but it won't disappear when i click the hide button and i don't know why.
<div class="butt">
<button type="button" onclick="myFunction()">Click Me!</button>
<button type="button" onclick="myFunctionHide">Hide</button>
</div>
<p id="test"></p>
<script = "text/javascript">
function myFunction() {
document.getElementById("test").innerHTML = "Andyduly";
}
</script>
<script = "text/javascript">
function myFunctionHide {
document.getElementById("test").innerHTML.object.style.display == "none";
}
</script>
2 issues in your code
<button type="button" onclick="myFunctionHide">Hide</button>
should be
<button type="button" onclick="myFunctionHide()">Hide</button>
function myFunctionHide {
document.getElementById("test").innerHTML.object.style.display == "none";
}
should be
function myFunctionHide() {
document.getElementById("test").style.display = "none";
}
style is property of the element and not the innerHTML.object
Also it is a better idea to avoid inline event handlers, which keeps your HTML cleaner also adhering to separation of concerns which makes your code more maintainable.
HTML
<div class="butt">
<button type="button" id="btn_click">Click Me!</button>
<button type="button" id="btn_hide">Hide</button>
</div>
<p id="test"></p>
JS
var elemTest = document.getElementById('test');
document.getElementById('btn_click').addEventListener('click', function () {
elemTest.innerHTML = "Andyduly";
});
document.getElementById('btn_hide').addEventListener('click', function () {
elemTest.style.display = "none";
});
You can encase your whole code inside a single script tag.
Check Fiddle
See this fiddle
To hide an element using Javscript, try something like
document.getElementById('test').style.display = 'none';
So replace your <script> as below
<script = "text/javascript">
function myFunctionHide() {
document.getElementById("test").style.display = 'none';
}
</script>
There are many errors in your Javascript and HTML
Edited Javascript
function myFunction() {
document.getElementById("test").innerHTML = "Andyduly";
}
function myFunctionHide() {
document.getElementById("test").style.display = "none";
}
You forgot to add () to your myFunctionHide in your Javascript.
Also, the edited HTML would be
<div class="butt">
<button type="button" onclick="myFunction()">Click Me!</button>
<button type="button" onclick="myFunctionHide()">Hide</button>
</div>
<p id="test"></p>
Well, first of all you syntax doesn't look right, should be
function myFunctionHide() {
document.getElementById('test').style.display = 'none';
}
Try this one, I'm clearing the text from "test" P tag.
<div class="butt">
<button type="button" onclick="myFunction()">Click Me!</button>
<button type="button" onclick="myFunctionHide()">Hide</button>
</div>
<p id="test"></p>
<script = "text/javascript">
function myFunction() {
document.getElementById("test").innerHTML = "Andyduly";
}
</script>
<script = "text/javascript">
function myFunctionHide() {
document.getElementById("test").innerHTML = "";
}
</script>
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/
Here i have one check box if that check box is checked then i want to display one div and if that checkbox is unchecked then i want to hide that div.
Below is my code its not working please help .
<div class="row1" id="homemove"> <span class="label">Home Move</span>
<input type="checkbox" id="homecheck" onclick="HomeMove()" </input>
</div>
function HomeMove() {
if (document.SalesNew.HomeMove.checked) {
document.getElementById("NewAddress").style.display = "block";
} else if (!document.SalesNew.HomeMove.checked) {
document.getElementById("NewAddress").style.display = "none";
}
}
Replace your Javascript HomeMove function as below
function HomeMove() {
if (document.getElementById("homecheck").checked) {
document.getElementById("NewAddress").style.display = "block";
} else {
document.getElementById("NewAddress").style.display = "none";
}
}
Not sure what document.SalesNew.HomeMove is supposed to be, but you should just create an event handler like so:
<div class="row1" id="homemove">
<span class="label">Home Move</span>
<input type="checkbox" id="homecheck"></input>
</div>
<script type="text/javascript">
document.getElementById('homecheck').onchange = function() {
document.getElementById("NewAddress").style.display = this.checked ? 'block' : 'none';
}
</script>
Also, you don't have an element with the ID NewAddress, but I'm guessing there is one in the actual code you're using.
Or, if you want to keep your own code, you could do it this way:
http://jsbin.com/uludes/1/edit
Try out the following fiddle: http://jsfiddle.net/GtmWX/2/
Simple checkbox to show/hide div
HTML
<p>Check here to show div <input type="checkbox" name="checkbox" id="checkbox" tabindex="165" /></p>
<div id="hiddenDiv"></div>
JS
function setUp() {
document.getElementById("checkbox").onclick = function() {
if (document.getElementById("checkbox").checked) {
// show div
document.getElementById("hiddenDiv").style.display = "block";
} else {
// hide div
document.getElementById("hiddenDiv").style.display = "none";
}
};
// hide on initial page load
document.getElementById("hiddenDiv").style.display = "none";
}
window.onload = function() {
setUp();
};
Alright, so I have two buttons. My goal is to make the page so that when one button is clicked, it will display a paragraph, and when another is clicked it will close the other tab and display another paragraph. I thought this would be pretty simple, but getting one tab to close when the other is clicked has proved difficult.
function btn1Event(){
var text1 = document.getElementById("btn1Text");
var text2 = document.getElementById("btn2Text");
if(text2.style.display == "inline" || text1.style.display == "none"){
text1.style.display = "inline";
}
}
function btn2Event(){
var text1 = document.getElementById("btn1Text");
var text2 = document.getElementById("btn2Text");
if(text1.style.display == "inline" || text2.style.display == "none"){
text2.style.display = "inline";
}
}
Not exactly sure why this isn't working. Any help is appreciated!
Here is a solution using jQuery if that is an option:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
<input type=button id="btn1" value="Show Div1">
<input type=button id="btn2" value="Show Div2">
<div style="display: none;" id="btn1Text">Test Div</div>
<div style="display: none;" id="btn2Text">Test Div2</div>
<script type="text/javascript">
$(document).ready(function () {
$("#btn1").click(function() {
$("#btn1Text").show();
$("#btn2Text").hide();
});
$("#btn2").click(function() {
$("#btn1Text").hide();
$("#btn2Text").show();
});
});
</script>
And the non jQuery approach:
<input type=button id="btn1" value="Show Div1" onclick="btn1Event();">
<input type=button id="btn2" value="Show Div2" onclick="btn2Event();">
<div style="display: none;" id="btn1Text">Test Div</div>
<div style="display: none;" id="btn2Text">Test Div2</div>
<script type="text/javascript">
function btn1Event(){
document.getElementById("btn1Text").style.display = "inline";
document.getElementById("btn2Text").style.display = "none";
}
function btn2Event(){
document.getElementById("btn1Text").style.display = "none";
document.getElementById("btn2Text").style.display = "inline";
}
</script>
All you are doing is setting the textbox display to inline. If you never set the display to none at any time, how do you expect any of the tabs to be hidden.
function btn1Event(){
document.getElementById("btn1Text").style.display = "inline";
document.getElementById("btn2Text").style.display = "none";
}
function btn2Event(){
document.getElementById("btn1Text").style.display = "none";
document.getElementById("btn2Text").style.display = "inline";
}