Develop Reference

Javascript that automatically fills in HTML file path for images

I'm trying to use window.location.pathname and injecting innerHTML to generate the file paths for an image so all I need to do is type fileName.png in a div in the html body and have the javascript generate the file path behind it so that it displays the image in the rendered website. This is for images that aren't stored in the same folder as the working file.
I've had mild success but it only works for one image per page which isn't very helpful.
I've gotten this code to work for one image per page:
<div class="picName">pic.png</div><div id=<"shortcut"></div>`
<script>
var relativePath = window.location.pathname;
var picName = document.getElementById('matts-shortcut').previousElementSibling.innerHTML;
document.getElementById("matts-shortcut").innerHTML =
'<src=\'/images' + relativePath + '/' + picName + '\'>';
</script>

The solution below pulls images names from with Divs using .querySelectorAll() which returns a DOM NodeList. The NodeList is useful because it has a forEach() method that can be used to loop over each item is the list. Loop over each list item using it's textContent property as the image name. Then you'll need to create a new image element for each image. To do that you can do something similar to this.
let relativePath = "https://dummyimage.com"; // replace the url with path name (maybe window.location.path)
// create a reference to the input list
// querySelectorAll return a NodeList
let inputNameList = document.querySelectorAll('.image-name');
// Loop through each image name and append it to the DOM
// the inputNameList (NodeList) has a "forEach" method for doing this
inputNameList.forEach((image) => {
let picName = image.textContent;
// Create a new image element
let imgEl = document.createElement('img');
// Set the src attribute of the image element to the constructed URL
// the name of the picture will be the div text content
// This is done with a template literal that you can learn about here:
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
imgEl.src = `${relativePath}/${image.textContent}`;
// Now we have a real image element, but we need to place it into the DOM so it shows up
// Clear the image name
image.textContent = "";
// Place the image in the Div
image.appendChild(imgEl);
});
<div class="image-name">300.png</div>
<div class="image-name">200.png</div>
<div class="image-name">100.png</div>
<div class="image-name">400.png</div>
EDIT: In response to Ismael's criticism, I've edited the code slightly and commented every line so you can learn from this answer. There are two hyperlinks referenced in the code to help you think about coding in a modern way and so you can interpret modern code you read more easily.
About:
Arrow functions
Template Literals
Edit 2:
With further clarification, the answer has been amended to pull the image file names from Div elements already in the DOM.

Let ID equal your element's id
Call on:
document.getElementById(ID).src = "image_src"
When you want to change images, like an onclick action or as part of a function.

Change Anchor Target based on Text using JavaScript (No jQuery)

I have c# code which generates Anchor tags on fly. I wanted to change some of anchor tag target based on its text.
For example dynamic code generated HTML like below
<a target='_blank' class=txt href="http://www.stackoverflow.com">THE BEST SITE</a>
I wanted to change its target if text equals THE BEST SITE
Note: I have no jQuery files included in asp.net project.
So far I have tried including this script just to get the text, but it is not even displaying the alert
$(document).ready(function() {
$(".txt").click(function() {
alert($(this).text());
});
});

Here is a function that checks if an element's innerText is equal to a specific phrase. If it is, it sets the target attribute specific to that phrase.
function changeTarget(elem, phrase){
if(elem.innerText === phrase){
elem.target = phrase;
}
}
Depending on your DOM, you could just iterate through all your anchor elements and run this function with the desired phrase.
If you have a bunch of these with the .txt class you can just do something like:
var elems = document.querySelectorAll('.txt');
for(var i = 0; i < elems.length; i++){
changeTarget(elems[i], "THE BEST SITE");
}

I think you want something like
var els = document.getElementsByClassName('txt');
for(var i=0; i<els.length; ++i)
if(els[i].textContent == "THE BEST SITE")
els[i].target = 'something';

Toggle display:none to all tags in JavaScript (no jQuery) without classes : is it possible?

I've read similar posts but i only found where it says to add class to the HTML to do what i want, so, basically i have a button, that when i want to click it hides ALL code HTML tags, and when i click it again it shows them. Since i have a lot of code tags in a page it would take me quite a lot to add a class to each one. I've been trying a few things such as
if(document.getElementsByTagName("CODE").style.display === "block"){
document.getElementsByTagName("CODE").style.display = "none"
}
and something around that, all similar code, but they all either made my browser crash or didn't work. My question is, is it really a MUST to use the class name and check for the class name of it's possible to compare, as i "did" above in the code here, the display content of all tags? ( maybe looping with a for loop each element, i tried that too, with no result. )
i tried every possible thing with my few knowledge so far ( im still studying javascript ). I would really like to know if i am trying to do something really advanced or i just dont see how it can be done.
Thanks, i hope there wasnt another question like this, i've read all of the ones suggested and none ( except one it said to use class ) was like this.
They all recommend to add classes, so i feel like im trying to do something really impossible. Im not into jQuery yet, so dont talk about it please, thanks. ( first i must learn for good JavaScript )

You have to iterate through the results of document.getElementsByTagName("CODE"), it is an array-like variable. It is a jQuery feature that lets you write .css() to a list of objects and have them all processed. You need something like
ar = document.getElementsByTagName("code");
for (i = 0; i < ar.length; ++i)
ar[i].style.display = "none";
If you need to toggle code visibility, use this code
ar = document.getElementsByTagName("code");
for (i = 0; i < ar.length; ++i)
{
if(ar[i].style.display != "none") //the element is visible
{
ar[i].style.display = "none";
}
else
{
ar[i].style.display = "block"; //If you need to make it block explicitly, otherwise ""
}
}
Note that the style.display property is initially empty and defaults to inline for code tag but can be set explicitly to other values. Resetting it to '' results in restoring the state.
If you need to change the visibility back and forth without the modification of display mode, you need to save the previous mode (code tags can be displayed not only in block mode). Can be done like this:
ar = document.getElementsByTagName("code");
for (i = 0; i < ar.length; ++i)
{
if(ar[i].style.display != "none") //the element is visible, "" or "blocK" or some other value
{
ar[i].saved_display = ar[i].style.display; //Save the display mode to a new property of the tag
ar[i].style.display = "none"; //And hide the element
}
else
{
if (typeof ar[i].saved_display === "undefined") //It's the first time we see the element. Display it in default mode
ar[i].style.display = "";
else
ar[i].style.display = ar[i].saved_display; //We know how the element was shown before we hid it, restoring
}
}

As Aneri says, getElementsByTagName returns a NodeList that you can iterate over by index.
Note that the display property only has a value if it's been explicitly set, it does not inherit a value from CSS so you should do something like the following, which will hide all the CODE elements if their display hasn't been set to none and display them if it has:
var element, elements = document.getElementsByTagName("CODE");
for (var i=0, iLen=elements.length; i<iLen; i++) {
element = elements[i];
// If element hasn't been hidden, hide it
if (element.style.display == '') {
element.style.display = 'none';
// Otherwise show it
} else {
element.style.display = '';
}
}
Note that you should return the display value to "" (empty string) so that the elements return to their default or inherited value, which might not be "block".
Also, child elements will be hidden if their parent element has display: none.

You can add a class just to BODY or HTML element and attach needed styles to this class via e.g. context selectors. For example:
HTML.hide-code CODE {display: none; }

Finding the value of all H2s on a page with Javascript

I have been trying to find a solution on Google so I thought I would post it to the community. I need to use JavaScript to locate all the H2s on a page, get the innerHTML values and then loop them horizontally in a div (easy enough) to show a subheading anchor list at the top of the page. Can someone tell me or give me a hint on how I can use a JavaScript routine to locate all the H2s on a page? Thanks!

If you're using jQuery, you could run something like this
$('h2').each({
/* function */
});
Then to append to the .nav container you can run
$('h2').each(function() {
$('.nav').append($(this).text())
});

Use document.getElementsByTagName to select all the h2s:
var h2s = document.getElementsByTagName('h2');
for(var i = 0, length = h2s.length; i < length; i++){
// Do something with
h2s[i].innerHTML;
}

First of all, create an empty collection for the links you're going to create:
var $links = $();
Then, loop through each h2 using .each(), providing index and h2 as arguments — the first keep count, the second to get a reference of the current <h2> we're dealing with.
$('h2').each(function(index, h2){
// If there is no id (to link to), create one based on the index
if(!h2.id){
h2.id = 'header' + index;
}
// Get a jQuery object of the header
var $h2 = $(h2);
// Link will be an <a> with the same text as the heading, and will link to its id
var $link = $('<a>').text($h2.text()).attr('src', '#' + h2.id);
// Add this link to the collection
$links = $links.add($link);
});
So now $links contains your table of contents. Assuming you want to chuck these links in after the <h1>, you'd do the following:
$links.insertAfter('h1');
…but of course you can do whatever you want with them at this point.

jquery confusing code

I am learning Jquery and Javascript from web examples. I have a good working knowledge but some code still trips me up. The following code is used for a shopping cart to hide the check out button and replace with a div displaying a message about minimum cart requirements. There is a part of the code throwing me off though.
function getCollectionCount() {
var totalCollectionCount = 0;
var collection = $('td[alt*="Collection"]');
for (var i = 0; i < collection.length; i++) {
var curVal = $(collection[i]).find("select").val();
if (curVal != undefined){
totalCollectionCount += parseInt(curVal);
}
}
What does this part mean?
var collection = $('td[alt*="Collection"]');

td[alt*="Collection"] selects all <td> elements whose alt attribute contains Collection, such as:
<td alt="Collection"></td>
<td alt="CollectionFoo"></td>
<td alt="BarCollection12324343"></td>
but not
<td></td>
<td alt=""></td>
<td alt="Foo"></td>
Side note: this is a pretty basic question that could easily be answered by read the jQuery selectors API documentation:
element selector
attribute-contains selector
Please do try to research before you ask!

This is a jQuery attribute selector clause. It's selecting any td element which has an atrtibute named alt whose string contains the value Collection.
Contains Selector: http://api.jquery.com/attribute-contains-selector/
jQuery has a number of useful attribute selectors. Here is the main reference page for them. Very much worth the read if you're just getting started with jQuery
http://api.jquery.com/category/selectors/attribute-selectors/

That code returns every td element whose "alt" attribute contains "Collection".
http://api.jquery.com/attribute-contains-selector/
jQuery is full of these funky shortcuts that take forever to learn, so I always keep a copy of jQuery in action on my desk at all times :)

This code can be rewritten more simply and briefly like this:
function getCollectionCount() {
var totalCollectionCount = 0;
$('td[alt*="Collection"] select').each(function() {
var val = this.value || "0";
totalCollectionCount += parseInt(val, 10);
});
return(totalCollectionCount);
}
And, this is how it works:
Initialize totalCollectionCount to 0
Find all td elements that have the string "Collection" in the alt attribute and then find select elements within that td
Iterate over all elements found that match the above condition
Initialize a local variable with either the value of the select object or "0" if there is no value or it's empty
Turn that value into a number (must pass the radix to parseInt so it won't guess) and add it to the sub-total so far.
return the total we found.