We Keep Coding

Why a variable tht I change with a click event dosn't afffect another function that has to do with that variable?

I have the following code in js:
function feed() {
if(!batut){
foods.forEach(food => {
food.addEventListener('click', function() {
reset();
imgs[first + 1].style.display = "block"
txt.innerHTML = "Boss e satul. Doarme ca un porc."
feedTime();
} )
})
}
}
function goesAway(){
reset();
imgs[2].style.display = "block";
txt.innerHTML = "L-ai batut pe Boss si pleaca!"
clearTimeout(timer);
batut = true;
}
First one displays another img when i click one each of the objects.
The second is a function that triggers when i press a button.
When that happens i don't want that the first function to work anymore so I put there var = true in order to change it and dosn't apply to the if in the first but is not working..can someone help?

JQuery cookie set in other Function

I had a javascript Function showHide(shID) , which is a function to hide div or show content after clicked "read more" . Here is my Fiddle : http://jsfiddle.net/Garfrey/5xf72j4m/8/
As you see when user click on it and show more content , but I just need to hide once , means when the user come back to visit my page and the hidden content is still showing. So that I need to add JQuery cookie , but what I wrote was wrong and it's not working .I'am new in Javascript . Do anyone know how to fix it ? thanks in advance , I really need help .
here my code for function :
<script language="javascript" type="text/javascript">
jQuery(document).ready(function(){
if($.cookie("example")=='1') {
function showHide(shID) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
} else {
$.cookie("example", "1");
}
});
</script>

You can't define a function inside jQuery's ready function without doing something like this
var showHide;
$(function() { // Document ready
showHide = function(sh) {
//Insert function code here
};
});
I think in your case you might be better off defining the function outside of the ready function then binding it to the button's onclick handler dynamically.
I also added a data-showhide attribute to the button to pass the variable into the showhide function onclick.
function showHide() {
var shID = $(this).data("showhide"); // Use lower case only in data
if (document.getElementById(shID + '-show').style.display != 'none') {
document.getElementById(shID + '-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
} else {
document.getElementById(shID + '-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
$(function() {
$("#example-show").on("click", showHide);
});
<a href="#" id="example-show" class="showLink" data-showhide="example">
The cookies can be set to specific values in the showHide function. The ready handler can then query the cookie and determine whether or not to show or hide the div.
This fiddle shows this in action http://jsfiddle.net/e52hxosb/19/

Show/Hide Function(s)

Fixed Solution
//Hide and Show Divs
function hideContent(d) {
document.getElementById(d).style.display = "none";
}
function showInlineContent(d) {
document.getElementById(d).style.display = "inline";
}
function showBlockContent(d) {
document.getElementById(d).style.display = "block";
}
function reverseDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//Hide and Show Divs
// Show Div Click to show.
function researchStick() {
if (stick >= 1 && research1Progress < 100) { // Want to be able to show progress
stick = stick - 1; // each time you click me I want to use 1 stick
research1Progress = research1Progress + 5; // each stick brings research progress up 5
document.getElementById("stick").innerHTML = stick; // Show the player the update
}
if (research1Progress == 100) { // When reaches 100
showInlineContent('crafting2'); // show crafting2
}
// when research hits 100 unlocks blunt object for crafting
// this clickable button should hide after completion
// add achievement for first research project
}
Here is the fixed solution after applying some fixes. being able to call more then one if function is helpful to know, especially since all the tutorials I took did not specifically indicate it otherwise. maybe is was meant to be obvious but knowing this has helped me a newcomer to java create more code on my own

Onclick event to addEventListener not working

Check this code:
<script>
var next = document.getElementById("next");
var prev = document.getElementById("prev");
next.addEventListener("click",next(),false);
prev.addEventListener("click",prev(),false);
function next(e) {
e.preventDefault();
prev.style.display = "block";
next.style.display = "none";
}
function prev(e) {
e.preventDefault();
prev.style.display = "none";
next.style.display = "block";
}
</script>
<div id="nav">
‹‹‹
›››
</div>
I don't know why this is not working. I'm loading script just before <body> tag. Please help.
It gives me error: Uncaught TypeError: Property 'next' of object [object Object] is not a function

When you add the parenthesis to the functions, the functions are called immediately and the result, in this case undefined, is returned to addEventListener.
You want to reference the functions, not call them
next.addEventListener("click", next, false);
prev.addEventListener("click", prev, false);
The next error is that you're using the same names for the variables and functions, so when you say next.style it's now the function, not the element, as the function name overwrites the variable
var next_elem = document.getElementById("next");
var prev_elem = document.getElementById("prev");
next_elem.addEventListener("click", next_fn, false);
prev_elem.addEventListener("click", prev_fn, false);
function next_fn(e) {
e.preventDefault();
prev_elem.style.display = "block";
next_elem.style.display = "none";
}
function prev_fn(e) {
e.preventDefault();
prev_elem.style.display = "none";
next_elem.style.display = "block";
}

You need to mention the function names. By specifying () along with the function name, they are called.
Change it to:
next.addEventListener("click",next,false);
prev.addEventListener("click",prev,false);

Timeout inside a function (javascript)

I've this code:
function divHideShow(divToHideOrShow)
{
var div = document.getElementById(divToHideOrShow);
if (div.style.display == "none")
{
div.style.display = "block";
}
else
{
div.style.display = "none";
}
}
How to make it wait 2 seconds when executing div.style.display = "block"; ?
Thanks

You can use the function setTimeout to wait for a specified time (in milliseconds) before running some code.
function divHideShow(divToHideOrShow)
{
var div = document.getElementById(divToHideOrShow);
if (div.style.display == "none")
{
setTimeout(function () {
div.style.display = "block";
}, 2000);
}
else
{
div.style.display = "none";
}
}
It might be worth considering adding and removing a class rather than setting the style directly. You can then handle all styles using CSS which helps with maintainability (and you can use CSS3 animations to fade/grow/shrink things in and out too).

This answers you question: the second parameter of setTimeout takes milliseconds so, 2000 milliseconds= 2 seconds
function divHideShow(divToHideOrShow)
{
var div = document.getElementById(divToHideOrShow);
if (div.style.display == "none")
{
setTimeout(function(){div.style.display = "block";},2000);
}
else
{
div.style.display = "none";
}
}
If you need fadeIn or fadeOut effects you better consider using jquery library:
You need to include jquery library in order this to be working.....
function divHideShow(divToHideOrShow)
{
var time=600; //milli seconds alter this for changing speed
$("#"+divToHideOrShow).fadeToggle(time);
}