We Keep Coding

How to add a third javascript else if statement to a button?

EDIT
I meant to say, how could I add a third else if statement that would fire on the third click.
basically it opens and hide a different element on the first, second and third click.
so I want to add one more function to make a total of 3 functions to this onclick event that changes depending on how many times you click on the button. I am just not sure how to add a third function.
<div class="base" id="base">
<img src="img/base.svg">
</div>
<div class="base one" id="one">
<img src="img/one.svg">
</div>
<div class="base two" id="two">
<img src="img/two.svg">
</div>
<div class="base three" id="three">
<img src="img/three.svg">
</div>
<button class="test" id="test">btn</button>
var action = 1;
test.onclick = function viewSomething() {
if (action == 1) {
base.style.display = "none";
one.style.display = "block";
action = 2;
console.log(tets)
} else {
one.style.display = "none";
two.style.display = "block";
action = 1;
}
}

You already have the basic setup, you just need to extend it:
var action = 1;
test.onclick = function viewSomething() {
if (action == 1) {
base.style.display = "none";
one.style.display = "block";
action = 2;
console.log(tets)
} else if (action === 2) {
// ...
action = 3;
} else if (action === 3) {
one.style.display = "none";
two.style.display = "block";
action = 1;
}
Having said that, if you always go sequentially from one "action" to the other, you could consider moving each "action" into a separate function, storing all those functions into an array and have the click handler simply advance the index:
const actions = [
function(event) {
base.style.display = "none";
one.style.display = "block";
},
function(event) {
one.style.display = "none";
two.style.display = "block";
},
function(event) {
// ...
},
];
let actionIndex = 0;
test.onclick = function viewSomething(event) {
actions[actionIndex](event);
actionIndex = (actionIndex + 1) % actions.length;
};
The advantage of the solution is that you are decoupling the action "control" from the actions themselves and that you can more easily add and rearrange additional actions.

I'm not sure what you mean by a third function since I can only see viewSomething, but you can add an if else block to your if statement:
if (action == 1) {
base.style.display = "none";
one.style.display = "block";
action = 2;
console.log(tets)
} else if (this == that) {
// your logic here
} else {
one.style.display = "none";
two.style.display = "block";
action = 1;
}

If you really want three different functions (you currently have one function and two if statements), you need to use addEventListener:
function clickOne() {
console.log("first!");
}
function clickTwo() {
console.log("second!");
}
function clickThree() {
console.log("third!");
}
var test = document.querySelector("#test");
test.addEventListener("click", clickOne);
setTimeout(() => {
test.addEventListener("click", clickTwo);
}, 2000);
setTimeout(() => {
test.addEventListener("click", clickThree);
}, 5000);
<button class="test" id="test">Click</button>

Having trouble making an image disappear when using onmouseover event on a button

I'm having trouble making an image disappear while using an onmouseover event not on it, but on a button element. I need it to appear while onmouseover and disappear while not onmouseover. Heres my code:
<script>
function sfunc1() {
var x = document.getElementById('imgSWTCH1');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function sfunc2() {
var x = document.getElementById('imgSWTCH2');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function sfunc3() {
var x = document.getElementById('imgSWTCH3');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function sfunc4() {
var x = document.getElementById('imgSWTCH4');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function sfunc5() {
var x = document.getElementById('imgSWTCH5');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function sfunc6() {
var x = document.getElementById('imgSWTCH6');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function sfunc7() {
var x = document.getElementById('imgSWTCH7');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
This is the javascript to make it appear on mouseover, and the html is
<img id="imgSWTCH1"src="https://www.shareicon.net/data/128x128/2016/10/20/846459_blue_512x512.png" width="100" height="100"/>
<img id="imgSWTCH2"src="https://www.writeraccess.com/wp-content/uploads/2014/08/blog-html-5.png" width="100" height="100"/>
<img id="imgSWTCH3"src="https://www.shareicon.net/data/128x128/2016/06/25/619190_java_256x256.png" width="100" height="100"/>
<img id="imgSWTCH4"src="https://www.shareicon.net/data/128x128/2016/05/06/760855_css_512x512.png" width="100" height="100"/>
<img id="imgSWTCH5"src="http://poiemaweb.com/img/socketio-logo.png" width="100" height="100"/>
<img id="imgSWTCH6"src="https://www.shareicon.net/data/128x128/2016/07/08/116973_development_512x512.png" width="100" height="100"/>
<img id="imgSWTCH7"src="https://www.shareicon.net/data/128x128/2015/08/30/93000_javascript_512x512.png" width="100" height="100"/>
<center>
<br />
<br />
<table >
<tb id="tab" onmouseover="sfunc1()" onmouseout="this.className='BO';">C</tb>
<br />
<tb id="tab" onmouseover=" sfunc3()" onmouseout="this.className='BO';">Java</tb>
<tb id="tab" onmouseover=" sfunc2()" onmouseout="this.className='BO';">HTML</tb>
<tb id="tab" onmouseover="sfunc4()" onmouseout="this.className='BO';">CSS</tb>
<tb id="tab" onmouseover="sfunc5()" onmouseout="this.className='BO';">Socket.io/Node</tb>
<tb id="tab" onmouseover="sfunc6()" onmouseout="this.className='BO';">Angular.js</tb>
<br />
<tb id="tab" onmouseover="sfunc7()" onmouseout="this.className='BO';">Javascript</tb>
<tb id="tab" onmouseover=" this.className='BC';" onmouseout="this.className='BO';">and much more!</tb>
</table>
</center>
The onmouseout for all of these just makes the background orange but I want it to make the image corresponding to it disappear, which I'm having trouble with since you cant assign multiple ID's to an element. A jquery solution would work too, and so would one in angular.
https://plnkr.co/edit/WwpzOkipsiCrbgbpXbd4?p=preview
heres the pnlkr link, stetch the html portion out to see the whole thing too.

Here is a simple example using JQuery:
https://jsfiddle.net/ztuf96dg/4/
$(document).ready(function() {
$('li').hover(function(e) {
var imageID = $(e.currentTarget).attr('data-img-id');
var $image = $('img[data-img-id="' + imageID + '"]');
$image.show();
},
function(e) {
var imageID = $(e.currentTarget).attr('data-img-id');
var $image = $('img[data-img-id="' + imageID + '"]');
$image.hide();
});
});

Try doing it with one function for mouseover and one for mouseout. Also use the visibility property of the img instead of display to prevent the elements jumping.
See it here:
https://plnkr.co/edit/YeOgtFeEmNhRCgdQ0Mlp?p=preview
EDIT
So the point is:
function sfuncOver(imgId) {
var x = document.getElementById(imgId);
if (x.style.visibility === 'hidden') {
x.style.visibility = 'visible';
} else {
x.style.visibility = 'hidden';
}
}
function sfuncOut(imgId) {
var x = document.getElementById(imgId);
x.style.visibility = 'visible';
}
...in js and in html:
<td id="tab1" onmouseover="sfuncOver('imgSWTCH1')" onmouseout="sfuncOut('imgSWTCH1')">C</td>
...and so on. BUT doing this with jQuery would be 10 thousands better :) This is the coding style of the 90s :)

You have 7 functions doing the same exact thing. A better approach may be to create one function and bind what element you want to hide to it. Here is a fiddle with an example: https://jsfiddle.net/83drj2rs/1/
Here is the corresponding JavaScript:
function toggleVisibility(element){
if(element.style.display === "none") {
element.style.display = "inline-block";
} else {
element.style.display = "none";
}
}
Array.prototype.slice.call(document.getElementsByClassName('tab')).forEach(function(element){
element.onmouseover = toggleVisibility.bind(this, document.getElementById(element.getAttribute('data-hide')));
});
Also note that I removed all of your onmouseover attributes on the html elements themselves and replaced them with a data-hide attribute instead. This tells the function which element to hide on the mouseover event.

Try something like this:
HMTL:
<table >
<tb id="tab1">C</tb> //make sure id is unique for each <tb>
<br />
(...)
</table>
Javascript:
(*)make sure you wrap javascript on document ready.
$(function() {
$('#imgSWTCH1').hide();
$('#tab1').mouseover(function (e) {
//e.stopPropagation();
$('#imgSWTCH1').show();
});
$('#tab1').mouseout(function (e) {
//e.stopPropagation();
$('#imgSWTCH1').hide();
});
});

var change=function(){
if(document.getElementById("image").style.visibility == "visible"){
document.getElementById("image").style.visibility = "hidden";}else{document.getElementById("image").style.visibility="visible";}
}
function enter(){
document.getElementById("image").style.visibility = "hidden";
}
function leave(){
document.getElementById("image").style.visibility="visible";
}
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<img onmouseover="enter();" onmouseout="leave();" id="image" src="https://publicdomainvectors.org/photos/Microscope-BW.png"/>
<button onclick="change();" >ClicMe</button>
</body>
</html>
Run the code snnipet
Hope it does it...Good Luck

Showing and Hiding divs with Javascript

Here's my code:
<script>
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'none') {
document.getElementById('id + x').innerText = '[-]';
e.style.display = 'block';
}
else {
document.getElementById('id + x').innerText = '[+]';
e.style.display = 'none';
}
}
</script>
[+]
<div id="httpserver" style="display:block;">
....my content...
</div>
When I click the + nothing happens. I will eventually have multiple divs, each specifically named, so this function needs to be able to handle all the divs.
Any help is appreciated!

First you have to change your HTML. You have to add "" when you pass the value.
Change
onclick="toggle_visibility(httpserver);"
to
onclick="toggle_visibility('httpserver');"
HTML:
[+]
<div id="httpserver" style="display:none;">
....my content...
</div>
And then change
document.getElementById('id + x').innerText
to
document.getElementById(id + 'x').innerText
You should pass the var id appended with the char x but you pass the id+x as a char
JS:
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'none') {
document.getElementById(id + 'x').innerText = '[-]';
e.style.display = 'block';
}
else {
document.getElementById(id + 'x').innerText = '[+]';
e.style.display = 'none';
}
}
DEMO

I think you need this:
First you need to change markup with following
onclick="toggle_visibility('httpserver');" // Wrap id with ''
As there was some quotes error in js too look for the comments in the below:
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'none') {
document.getElementById(id + 'x').innerText = '[-]'; // Miss placed quotes ' with id and x
e.style.display = 'block';
} else {
document.getElementById(id + 'x').innerText = '[+]'; // Miss placed quotes ' with id and x
e.style.display = 'none';
}
}
Fiddle

You can accomplish this in a more concise and easier fashion using CSS and simply toggling a class via JS. Css content can swap out the + or - as well as show/hide the relevant contents.
.collapsible .toggle:before { content: '[+]' }
.collapsible.opened .toggle:before { content: '[-]' }
.collapsible .contents { display: none }
.collapsible.opened .contents { display: block }
$('.collapsible').on('click','.toggle',function() {
$(this).parent().toggleClass('opened');
});
<section class="collapsible"><a class="toggle" data-contents="part1">Part1</a><div class="contents" id="contents-part1">This is the expand/collapse content.</div></section>
<section class="collapsible"><a class="toggle" data-contents="part2">Part2</a><div class="contents" id="contents-part2">This is the expand/collapse content.</div></section>
http://jsfiddle.net/YG3kK/

how to make javascript object disappear when click on rest of page

How to change the following code so when clicking anywhere on the web page, the line "This is foo" will disappear, right now I have to click "Click here" to make it disappear.
<html>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
<body>
Click here
<div id="foo">This is foo</div>
</body>
</html>

You'll need to bind the click event to the body element for it to fire when you click anywhere on the page.

Try to use document object for attaching event handler
document.onclick = function(){
var e = document.getElementById('foo');
e.style.display = ((e.style.display != 'none') ? 'none' : 'block');
};

HTML:
<body onclick="foo();">
Click here
<div id="foo" style="display:none;" >This is foo</div>
</body>
JS:
var b = false;
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
b = true;
}
function foo() {
var e = document.getElementById('foo');
if(!b) e.style.display = 'none';
b=false;
}
And this bit of css:
body,html
{
width:100%;
height:100%;
}
http://jsfiddle.net/57ZpS/8/

Javascript IE7/IE8 Discrepancy

When I use document.getElementById('checkbox1').checked == true in IE8 it does not work but works in IE7, any solutions please?
<script language="Javascript" type="text/javascript">
function swap(){
if(document.getElementById('checkbox1').checked == true ){
document.getElementById('captionrow1').style.display = "none";
document.getElementById('captionrow2').style.display = "inline";
document.getElementById('show').style.display = "inline";
if (location.href.indexOf("CheckBox1=1") == -1)
location.href = "employees_commends1a.asp?CheckBox1=1";
}
if(document.getElementById('checkbox1').checked == false ){
document.getElementById('captionrow1').style.display = "inline";
document.getElementById('captionrow2').style.display = "none";
document.getElementById('show').style.display = "none";
}
}
</script>

Make sure the checkbox has a unique ID Also your code changes the location = unloads the page - I am sure that is what makes your code not work.
I suggest this instead:
window.onload=function() {
var chk = document.getElementById('checkbox1');
chk.checked=location.href.indexOf("CheckBox1=1") != -1
chk.onclick=function() {
location = "employees_commends1a.asp?"+(this.checked?"CheckBox1=1":"CheckBox1=0");
}
swap();
}
function swap(){
var checked = document.getElementById('checkbox1').checked;
document.getElementById('captionrow1').style.display = (checked)?"none":"inline";
document.getElementById('captionrow2').style.display = (checked)?"inline":"none";
document.getElementById('show').style.display = (checked)?"inline":"none";
}
<input type="checkbox" id="checkbox1" />