Develop Reference

image size adjust (no IDs) by a single javascript

How to adjust size of all images to 400*300 in a html file
keeping following conditions ?
with a single javascript located at the top
without any additional file like css
there are no Ids for images at present
In other words, I am finding a javascript (blahblah part) of a form
<script>
...
blahblah
...
</script>
<img src="image/01.jpg">
<img src="image/02.jpg">
...
<img src="image/99.jpg">
which will get the same effect as following
<img src="image/01.jpg" width=400 height=300>
<img src="image/02.jpg" width=400 height=300>
...
<img src="image/99.jpg" width=400 height=300>

window.addEventListener('DOMContentLoaded', (event) => document.querySelectorAll('img').forEach((img) => ([img.width, img.height] = [400, 300])), false);

Call a JavaScript function inside tag attribute

How can we call an JavaScript function inside tag attribute ?
let imageURL = () => 'http://www.example.com/image.png';
<img alt="error" src="javascript:imageURL()">

src accepts only url, you can place your function here: <img alt="Not available" src="whatever" onload="this.onload=null; this.src=imageURL();"/>

Use JavaScript to change the image src attribute:
document.getElementById('myImage').src = 'https://media.wired.com/photos/5b8999943667562d3024c321/master/w_2560%2Cc_limit/trash2-01.jpg';
<img alt="Not available" id="myImage" />

you can not run js function on attribute, try this function
first it try to load placeholder, after placeholder loaded it then trigger JS function
<img src="https://thumbs.gfycat.com/RapidRadiantBug-small.gif" onload="this.onload=null; this.src=imageURL();" />

Use javascript to change image source, see my example :
document.getElementById('image').setAttribute('src', 'https://media.wired.com/photos/5b8999943667562d3024c321/master/w_2560%2Cc_limit/trash2-01.jpg');
<img alt="Not available" src="" id="image">

Switch Image By Adding Text Before File Extension

I Hope you can help me.
When I click button it adds night before file extension ex.(interior-1.jpg to interior-1-night) but it only affects the first image which is interior-1.jpg.
What I want is to add "night" text before the file extension of all images under the "image" ID.
Here is my html code
<button onclick="changeMode()">switch</button>
<img id="image" src="interior-1.jpg"/>
<img id="image" src="interior-2.jpg"/>
<img id="image" src="interior-3.jpg"/>
<img id="image" src="interior-4.jpg"/>
<img id="image" src="interior-5.jpg"/>
Here is my javascript code
<script>
function changeMode() {
var filename = document.getElementById("image").src;
var modfilename = filename.replace(/(\.[\w\d_-]+)$/i, '-night$1');
document.getElementById("image").src = modfilename;
</script>
}

You should never use same id name on elements in the dom. Instead use same class name. To apply the src on all the img tag get all the tags using document.getElementsByClassName. Iterate over each element and change the src using a forEach loop
function changeMode() {
var filename = document.getElementsByClassName("image");
var a = '';
Object.values(filename).forEach((e) => {
a = e.src;
var modfilename = a.replace(/(\.[\w\d_-]+)$/i, '-night$1');
e.src = modfilename;
})
}
<button onclick="changeMode()">switch</button>
<img class="image" src="interior-1.jpg" />
<img class="image" src="interior-2.jpg" />
<img class="image" src="interior-3.jpg" />
<img class="image" src="interior-4.jpg" />
<img class="image" src="interior-5.jpg" />

The problem is that you are getting your element by GetElementById which only returns one element. You should change the id tag to name like this:
<img name="image" src="interior-1.jpg"/>
Then you should be able to retrieve all the elements using var els = document.getElementsByName('image');
now you need to change their file names, so
for (let i = 0; i<els.length; i++){
els[i].src = els[i].src.replace(/(\.[\w\d_-]+)$/i, '-night$1');
}

Here is my two cents. Use classes. This way you can query multiple elements instead of just one. Then apply your changes to each element using, in this case, a forEach.
The elements returend from document.querySelectorAll is a nodeList. That's why I use Array.prototype.forEach.call.
function changeMode() {
const imageNodes = document.querySelectorAll(".image");
Array.prototype.forEach.call(imageNodes, (node) => {
let modfilename = node.src.replace(/(\.[\w\d_-]+)$/i, '-night$1');
node.src = modfilename
})
}
<button onclick="changeMode()">switch</button>
<img class="image" src="interior-1.jpg"/>
<img class="image" src="interior-2.jpg"/>
<img class="image" src="interior-3.jpg"/>
<img class="image" src="interior-4.jpg"/>
<img class="image" src="interior-5.jpg"/>

JavaScript - img name onclick event

How do I have JavaScript telling me the current image name with an ONCLICK event... and I need to do this with alert() for some reasons.
function imgName() {
window.alert()
}
HTML
<figure>
<img src="aster.jpg" alt="aster" onclick="window.alert()">
<figcaption><span>I am aster</span></figcaption>
</figure>
Thanks

Giving an id to image for query from js code.
and just writing:
alert(document.querySelector('#imageId').alt) //supposed alt as name.

Change:
onclick="window.alert()"
to:
onclick="imgName(this)"
and within your imgName function change:
window.alert()
to
alert(foo.src)
where foo is the argument you pass to the function via function imgName(foo)
function imgName(foo) {
alert(foo.src)
}
<figure>
<img src="aster.jpg" alt="aster" onclick="imgName(this)">
<figcaption><span>I am aster</span></figcaption>
</figure>
Or you could just ditch the function and alert the src directly via:
<figure>
<img src="aster.jpg" alt="aster" onclick="alert(this.src)">
<figcaption><span>I am aster</span></figcaption>
</figure>

Please see below -
<html>
<body>
<script language="javascript" >
function imgName() {
var fullPath = document.getElementById("img1").src;
window.alert(fullPath)
}
</script>
<img src="aster.jpg" alt="aster" id="img1" onClick="imgName()">
</form>
</body>
</html>

In "onclick" you are not calling the function "imgName()".
Do this:
<figure>
<img src="aster.jpg" alt="aster" onclick="imgName()">
<figcaption><span>I am aster</span></figcaption>
</figure>
If "current image name" means that you want the alt attribute ("aster"), the code of function need to be this:
function imgName() {
var nameOfPics = document.getElementsByTagName("img")[0].getAttribute("alt");
alert(nameOfPics);
}

The problems is when you click the image, you didn't call the related function.
Change onclick="window.alert()" with the related function to return window alert.
<img src="aster.jpg" alt="aster" onclick="window.alert()">
Change with :
<img src="aster.jpg" alt="aster" onclick="imgName()">
I Hope its can help you, pardon me if this is not the best answer

How to create a div element out side the selected html element

The following tag is static element
<img src="http://www.jqueryscript.net/demo/Easy-Image-Morphing-Effect-with-jQuery-Canvas-morphing-js/img/pic.jpg" height="200" width="200" alt="">
and I want to create a div tag around the img tag dynamically, like below
<div class="dycls">
<img src="http://www.jqueryscript.net/demo/Easy-Image-Morphing-Effect-with-jQuery-Canvas-morphing-js/img/pic.jpg" height="200" width="200" alt="">
</div>
I tried the below code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js" type="text/javascript"></script>
<img src="http://www.jqueryscript.net/demo/Easy-Image-Morphing-Effect-with-jQuery-Canvas-morphing-js/img/pic.jpg" height="200" width="200" >
<script>
$(document).ready(function(){
$("img").prepend("<div class="dycls">");
$("img").append("</div>");
});
</script>

use .wrap
$(document).ready(function(){
$("img").wrap('<div class="dycls" />');
});
Using prepend()/append() does not work like string concatenation, also they add the passed element as children of the calling element

prepend/append will not work in this case. Use wrap()
Wrap an HTML structure around each element in the set of matched elements.
var myEl = $('<div />').addClass('dycls');
$('img').wrap(myEl);