Develop Reference

Run JS Functions run in sequence onclick

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);

Problems with javascript event handler

I'm hoping this doesn't get marked as "duplicate", because I have reviewed several threads and followed the advice I found. I know I'm missing something simple, and need other eyes on this. I'm a newbie, so please bear with me. I am testing a simple button element that I have a click event handler on, but it is not working. It works inline with "onclick", but I am trying to avoid that. The simple html:
<div>
<button id='handler'>Event</button>
</div>
<div id='stringText'>
<h4>Some Description</h4>
<p>
Some more information
</p>
</div>
And the javascript:
<script>
document.getElementById("handler").addEventListener("click", display, true);
function display() {
if (document.getElementById("stringText").style.display === "block") {
document.getElementById("stringText").style.display = "none";
} else {
document.getElementById("stringText").style.display = "block";
}
};
</script>
I have the css that initially sets the "stringText" display as "none". I appreciate any assistance.

Probably your problem is related to the execution of that script while the document is being loaded.
Add this condition stringText.style.display === "" to show/hide the elements correctly.
An alternative is using the event DOMContentLoaded
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
document.getElementById("handler").addEventListener("click", display, true);
function display() {
var stringText = document.getElementById("stringText");
if (stringText.style.display === "block" || stringText.style.display === "") {
stringText.style.display = "none";
} else {
stringText.style.display = "block";
}
};
});
<div>
<button id='handler'>Event</button>
</div>
<div id='stringText'>
<h4>Some Description</h4>
<p>
Some more information
</p>
</div>

Please allow some delay to load the pages using window.onload events
<div>
<button id='handler'>Event</button>
</div>
<div id='stringText'>
<h4>Some Description</h4>
<p>
Some more information
</p>
</div>
<script>
window.onload = function(){
document.getElementById("handler").addEventListener("click", display, true);
};
function display() {
if (document.getElementById("stringText").style.display === "block") {
document.getElementById("stringText").style.display = "none";
} else {
document.getElementById("stringText").style.display = "block";
}
};
</script>

If you make sure and set the initial display property to block it works fine. As an alternative, you could also try using jQuery, as I have in the snippet.
//with jquery
$(document).ready(function() {
$('#handler').on('click', function() {
$('#stringText').toggleClass('hide');
})
})
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button id='handler'>Event</button>
</div>
<div id='stringText'>
<h4>Some Description</h4>
<p>
Some more information
</p>
</div>

Show div on click

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';
}
}

Toggle display of an an element when you click on another element

I have a p element and a hidden pre element. I want to make it so that when you click on a p element with (for example) id/class = "p1", it changes the display of the pre element with (for example) id/class = "pre1".
This is my javascript code :
var p = 1;
setInterval(function() {
if(p <= document.querySelectorAll(".show").length) {
document.getElementById("display-pre"+p).onclick = function() {
console.log(p);
if(document.getElementById("display-pre-a"+p).style.display == '') {
document.getElementById("display-pre-a"+p).style.display = 'block';
} else if(document.getElementById("display-pre-a"+p).style.display == 'block') {
document.getElementById("display-pre-a"+p).style.display = 'none';
}
};
p++;
if(p > document.querySelectorAll(".show").length) {p = 1;}
}
}, 100);
This code kind of works but not really. It sometimes changes other elements and sometimes does nothing.
This is my full javascript code : https://pastebin.com/wEwdKKLy
This is my html :
<div id="test-div">
<input type="text" id="search"/>
<button type="submit" onclick="query()">Submit</button>
<button type="submit" onclick="newInput()">New</button>
<button type="submit" onclick="remove()">Delete</button>
<button type="submit" onclick="deleteAll()">Delete All</button>
<div class="query-div"><p class="query-p">Test-a</p></div>
<div class="query-div"><p class="query-p">Test-b</p></div>
<div class="query-div"><p class="query-p">Test-ba</p></div>
<p id="query-show0">TEST-SHOW</p>
<p id="child"></p>
</div>
Note : elements with class "show" have display none
I tried doing this with jquery but I'm just began learning jquery yesterday and it didn't work (I had the same problem as this).
Jquery code I tried : https://pastebin.com/cBisCmEZ
Thank you for your help.

Here is the solution for you
$("p[data-id]").on("click", function() {
var idFound = $(this).data("id");
$("[data-pre='"+ idFound +"']").toggleClass("show");
});
pre {
display:none;
}
.show {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p data-id="p1">This is the paragraph</p>
<pre data-pre="p1">This is the pre<pre>
I recommend using a button element for anything you click so that it stays accessible.

How to reverse the hide event of a div onclick

I have a div and a button which i would like to show/hide the div when its clicked:
<input type="button" name="info" value="Contact Information" onclick="showDiv()">
<div align="center" id="element" style="display: none;">bla</div>
And this piece of script:
function showDiv() {
document.getElementById('element').style.display = "block";
if( ... )
document.getElementById('element').style.display = "none";
}
The display style of the div is none,so its hidden.The first line of the js script changes that value into block,so the div its displayed now. Now i need something to reverse the first line,in case the button its triggered again.So i thought a conditional statement will do it,but i have no idea how to build it. Something line : "if the display style its block,execute the code between {}"
Any idea?

Edit
function toggleDiv(elementId, button, textOn, textOff) {
var style = document.getElementById(elementId).style;
if( style.display == "none" ) {
style.display = "block";
button.innerHTML = textOn;
} else {
style.display = "none";
button.innerHTML = textOff;
}
}
<button name="info" onclick="toggleDiv('element', this, 'Hide Contact Information', 'Show Contact Information')">Show Contact Information</button>
<div align="center" id="element" style="display: none;">bla</div>
Original Answer
function toggleDiv() {
if( document.getElementById('element').style.display == "none" ) {
document.getElementById('element').style.display = "block";
} else {
document.getElementById('element').style.display = "none";
}
}

Using the browser DOM directly is very annoying and your solution may not work in all browsers. You should use some javascript framework like jQuery, prototype or mootools. In jQuery what you want to do is as simple as this:
$("#element").toggle()
If you insist on using raw javascript you can try this:
function showDiv() {
if( document.getElementById('element').style.display == 'block' )
document.getElementById('element').style.display = "none";
else
document.getElementById('element').style.display = "block";
}

<input type="button" name="info" value="Contact Information" onclick="showDiv()">
<div align="center" id="element" style="display: none;">bla</div>
<script>
function showDiv() {
var div = document.getElementById('element').style.display;
if( div == 'block' )
document.getElementById('element').style.display = "none";
else
document.getElementById('element').style.display = "block";
}
</script>