We Keep Coding

Content of <script> printed instead of executed

Basically, I would like to know what could cause the content of a <script> tag to be printed instead of executed in HTML.
Context: I have accordion buttons, what I want to do is change the image in the button from a down arrow to an up arrow on click. I am using part of the code described here.
If i put my code in a fiddle, like this one (I replaced img with alts to avoid local files problems), it works.
However, in my code, if I put the script before the button, nothing happens, and if i put it after it, then the content of the script apears below the button when I click it (event if it's just var a = null, then it would print var a = null).
<button class="accordion" id="button_emotion">VIEWS<img id="button_emotion_img" src="images/arrow_grey.svg" width="30" height="30" alt="" style="float:right;margin:0 0px 0 0px;" /></button>
<script>
document.getElementById('button_emotion').onclick=function () {
document.getElementById('button_emotion_img').src = "images/arrow_grey_up.svg";
};
</script>
I have also tried using onClick="myFunction()" in the button tag with the same result.
What could be causing this?
UPDATE:
I have found the culprit. Later in the code, there is something like that:
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
</script>
I am not exactly sure what it does as I did not write this code, but it shows the next tags that are non "accordion" class. There is a modified bootstrap that makes it possible to print the content, however without it, it just doesn't execute the script, but does not print it either.
Here's the updated JSFiddle with the extra code. If you put the image changing part before the script or in a <script> in the HTML part, it doesn't execute it (and with the modified css would print it instead), but if you place it before, the code will execute.

Setting display CSS property of a <script> tag may result in its content being printed. That was the case for me.

JavaScript - onclick image change using 'if'

I tried js image changing example using two different if methods.
<img id="myImage" onclick="changeImage()" src="s.png">
Click image
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.getAttribute('src')=='s.png')
image.src="m.png";
else
image.src="s.png";
}
</script>
Above method works totally fine no matter how many times clicked on the image or no matter which image is compared inside the 'if' part.
But below method which is given in w3c doesn't work as expected.
function changeImage(){
var image = document.getElementById('myImage');
if (image.src.match("s"))
{image.src ="m.png";}
else
{image.src ="s.png";}
This second method works only at first click. And also when the image compared inside the 'if' part is swapped with other image, it doesn't work at all even at the first click. Can someone please explain me, why second 'if' method doesn't work properly while first 'if' method works finely?

The reason why your code is not working is that web browser automatically adds site path to your image url because you are using relative image url. So you will have 's' character in every url (because s letter is in site url). And every .match('s') will always return true.
The solution is just to find out another checking of current image.
Here is example which logs out image src, so it should help you to understand the problem: https://jsfiddle.net/0yL0fwpL/4/
Html:
<img id="myImage" onclick="changeImage();" src="s.png">
Click image
Javascript:
changeImage = function() {
var image = document.getElementById('myImage');
if (image.getAttribute('src')=='s.png') {
image.setAttribute('src', "m.png");
} else {
image.setAttribute('src', "s.png");
}
}
Working example: https://jsfiddle.net/0yL0fwpL/2/

Webcomic Navigation Using Javascript?

I'm building my new webcomics home on my website and have ran smack into a wall.
Here's what I want and what I've tried.
I'm trying to have something where using JavaScript I can make only the image of the comic change so that I do not have to make a new page for every single image. I don't mind having to do extra coding work as long as I don't have hundreds of pages in my directory.
I was going to have a /First Next Prev Last/ kind of navigation but I've been so frustrated with it that I kind of scrapped that idea for now and instead am thinking of having a list of the names + link of each comic below the image and just put that into a scroll box. Kinda like how Perry Bible Fellowship works.
I've been trying to figure out if maybe an array is the way to go as I have around 30 images so far and I will be updating daily. Honestly I don't even know if Javascript is the way to go either.
I've also tried to implement [this code](http://interestingwebs.blogspot.com/2012/09/change-image-onclick-with-javascript.html
) to see if it would work and it just seems to break as soon as I try to plug in my own stuff into it. Here's an example of my javascript butcher job:
<script language="javascript">
function Drpepper()
{
document.getElementById("image").src = "/comics/1DrPepper.jpg";
}
function Applestore()
{
document.getElementById("image").src = "/comics/2Applestore.jpg";
}
</script>
<p>
<img alt="Dr Pepper" src="1DrPepper.jpg"
style="height: 85px; width: 198px" id="image" /></p>
<p>
<input id="Button1" type="button" value="Dr Pepper" onclick="DrPepper()"/>
<input id="Button2" type="button" value="Apple Store" onclick="Applestore()" /></p>
Is there anyway to expand this for my purposes? What I would like is to not have buttons and just use links but I can't seem to get beyond this part here where the image doesn't even load and the buttons do nothing.
Also if there is some better way of doing this using any other method other than JavaScript, I'm more than open to it, except the aforementioned making hundreds of pages.

First off, consider using jQuery if you're going to go the Javascript route. Here's an example I mocked up for you:
// set up an array of comic images
var imgs = [
'http://dustinland.com/dlands/dland.sxsw.jpg',
'http://dustinland.com/dlands/dland.hipster.jpg',
'http://dustinland.com/dlands/dland.legalize.marijuana.jpg',
'http://dustinland.com/dlands/dland.TLDR.jpg'
],
// initialize current to 0
current = 0;
// define a function that returns the next item in the imgs array,
// or the first if we're already at the last one
function next() {
current++;
if (current >= imgs.length) current = 0;
return imgs[current];
}
// define a function to do the opposite of next()
function prev() {
current--;
if (current < 0) current = imgs.length - 1;
return imgs[current];
}
// define the first image in terms of a jquery object
var comic = $('<img/>').attr('src', imgs[0]);
// append to DOM
$('#comics').append(comic);
// click the prev button, get the previous image
$('#prev').on('click', function(){
comic.attr('src', prev());
});
// click the next button, get the next image
$('#next').on('click', function(){
comic.attr('src', next());
});
See this in action here: http://jsfiddle.net/QzWV5/
This may work fine for your application, but maybe you should consider the advice of #icktoofay; using Javascript will mean, at the very least, that Google won't automatically crawl all your images. This also presents a usability problem: do you want to force your users to click through every comic in order to reach the first? It's probably best if every image were reachable via its own URL, that way, anyone who came across your comic on the web could easily link to an individual comic.
Have you considered using Tumblr, Blogger, or Wordpress?

How can I use javascript to add and remove an element over and over again?

First posting. I am attempting to use buttons defined in HTML to call a function that creates buttons via JavaScript while the other button removes the buttons created.
HTML:
<div id="thisdiv">
<input type="button" onclick="makeButtons()" value="Add" />
<input type="button" onclick="removeButtons()" value="Remove" />
</div>
Javascript:
function makeButtons()
{
var buttonOne=document.createElement("BUTTON");
var buttonTwo=document.createElement("BUTTON");
buttonOne.setAttribute("id", "yesdombutton"); //adds id to button
buttonTwo.setAttribute("id", "nodombutton"); //adds id to button
document.getElementById("thisdiv").appendChild(buttonOne); //appends buttons
document.getElementById("thisdiv").appendChild(buttonTwo);
}
function removeButtons()
{
var div = document.getElementById("thisdiv");
div.removeChild(yesdombutton); //this works only once in firefox but >
div.removeChild(nodombutton); //works over and over in IE
}
As the comment sin the remove() function state, the code as is only works once in Firefox, but works fine in IE10. And by work, I mean that I can click the Yes and No buttons in the HTML section, back and forth, and the buttons created by the JavaScript appear and disappear as they should.
I would like the same to occur in Firefox but I have been unable to find an answer.

And a friend of mine mentioned that I have a scope issue... The following code makes the site work like how I want it to.
Javascript:
function removeButtons()
{
var div = document.getElementById("albumown");
var destroyMe = document.getElementById("yesdombutton"); //This makes it so that
var destroyMeToo = document.getElementById("nodombutton"); //the buttons I want to
//remove are referenced
div.removeChild(destroyMe); //correctly
div.removeChild(destroyMeToo);
}
Thank you to those that asked about this! I have been wracking my head for a week trying different things. But, all is well now.

DIV with an onclick function and an image inside of it has a dead spot

I have a DIV with in image inside of it. There is a spot right before the image that does not fire the onclick function when clicked. The rest, including the image and the DIV fire the function when clicked. I have tried attaching the function to the image itself in addition to the DIV and this does not fix the problem. Anyone know what to do?
//this give all the divs the function
var ButtonNumber = document.querySelectorAll(".ButtonStyle");
for (var i = 0; i < ButtonNumber.length; i++) {
ButtonNumber[i].onmouseover = ChangeCursor;
ButtonNumber[i].onclick = ButtonsAddTogether;
ButtonNumber[i].onselectstart = function() {return false;}
}
This is the HTML
<div id="55" class="ButtonStyle"><img alt="1" class="Center" src="Buttons/7.png"></div>

Try setting the image and the div to have the same height. That or use an inline element rather than a block element such as an anchor tag

I have placed your code within jsfiddle: http://jsfiddle.net/BUwFP/1/
Please look at it and tell me if it works for you. I have just:
defined functions that were not defined (probably you just skipped them showing your code),
added borders to image and the div that contains it,
and everything looks fine - clicking the box etc. fires events. Do similar thing and check whether your box really is placed where you click or somehow it has been moved (probably by CSS styles or JS code). You probably already know, that you may use Firebug in Firefox, Developer Tools in Chrome or anything similar.