Develop Reference

JQuery append image not showing

For this code block
$(document).ready(() => {
for (let i = 0; i < 10; i++) {
$("#main").append(factory());
}
});
this will show the image:
function factory() {
return $('<image class="champ-icon rounded-circle" src="resources/irelia.jpg" />');
}
while this doesn't
function factory() {
let $champIcon = $(document.createElement("image"))
.addClass("champ-icon rounded-circle")
.attr("src", "resources/irelia.jpg");
return $champIcon;
}
I'm using Bootstrap 4 as well.
The page currently is just a static mock up. I want to dynamically build elements from data given to it by a local server.
I literally just messed around with HTML/CSS and jQuery over the weekend so I'm not sure what went wrong here. Shouldn't both function return the same jQuery object?
Thanks!
CSS class
.champ-icon {
width: 100px;
height: 100px;
}
Edit: creating it with normal javascript works as well.
function factory() {
let img = new Image();
img.src = "resources/irelia.jpg";
img.className = "champ-icon rounded-circle";
return img;

That's because you are trying to programmatically create <image> element in html, which... doesn't exist. To insert element on a page you should use <img src="">, not <image...>. Change this line
let $champIcon = $(document.createElement("image"))
to
let $champIcon = $(document.createElement("img"))
And it should work.

How can I use a Javascript variable as href inside an anchor tag?

I am setting up a system for pagination with similarly-named pages. I was able to set up a system that takes my original page's url and creates a "next" and "previous" link. However, these links are in the form of JS variables, and I don't know to insert them inside an anchor tag.
My current code is:
function break_address(url_add) {
var page = url_add.split("/").slice(-1);
var num = url_add.split('page-')[1];
[1]; //next
var numnext = parseInt(num)+1;
var numprev = parseInt(num)-1;
var nextpage = "https://MYCOMIC.neocities.org/page-" + numnext + ".html";
var prevpage = "https://MYCOMIC.neocities.org/page-" + numprev + ".html";
//this return is only so that I can make sure the new links were created correctly
return [num, numnext,numprev,nextpage,prevpage]
document.getElementById("next").setAttribute("href",nextpage);
}
//in the real code i am adding the current url with window.location.href instead
var url_add = "https://MYCOMIC.neocities.org/page-2.html"
console.log("Original address: "+url_add)
console.log(break_address(url_add))
<!--the links are set to # right now because I don't know how to set them up. I originally tried setting them as <a id="next">link</a>, but this resulted in an un-clickable link.-->
<a href="#">
<img src="previous.png" alt="PREVIOUS PAGE" style="height: 75px; width: 75px; padding-left 50px, padding-right: 50px;"></a>
<a href="#">
<img src="next.png" alt="NEXT PAGE" style="height: 75px; width: 75px; padding-left 50px, padding-right: 50px;"></a>
In another similar question on here, someone suggested adding something along the lines of
document.getElementById("next").href = nextpage;
inside the script, and then recalling it by doing
<a id="nextpage">link</a>
However, when I tried to do this, the link could not be clicked.
I tried adding href back into the anchor taglink) but then the link goes to the same page I am already on.
What am I doing wrong? (note: the files linked to by the new generated urls do all exist.)
I know I can link the next and previous pages manually. I don't want this, I want code which can automatically link to the urls generated by the Javascript. Is this possible? How could I do it?

This is the right way of using anchor tag:
link

In another similar question on here, someone suggested adding something along the lines of: document.getElementById("next").href = nextpage;
From the html code you provided, it seems like you never specified an id on the a tag so so no element is retrieved.
However, another solution would be to just embed the path of the html file in the a tag's href like so:
link

Thank you for everyone who tried to help, I ended up figuring it out with some help from someone I know IRL.
My final code looked like this:
//takes my current page's url which is in the form path/page-#.html and splits off the #.html
function get_nextpage(url_add) {
var page = url_add.split("/").slice(-1);
var num = url_add.split('page-')[1];
[1];
//adds 1 to the number within the #.html, makes a new link which is "nextpage"
var numnext = parseInt(num)+1;
var nextpage = "https://MYCOMIC.neocities.org/page-" + numnext + ".html";
return nextpage;
}
//same but for previous page
function get_prevpage(url_add) {
var page = url_add.split("/").slice(-1);
var num = url_add.split('page-')[1];
[1];
var numprev = parseInt(num)-1;
var prevpage = "https://MYCOMIC.neocities.org/page-" + numprev + ".html";
return prevpage;
}
//function which uses the new url whenever my links are clicked
window.onload = function(e) {
var url_add = window.location.href;
var nextpage = get_nextpage(url_add);
var prevpage = get_prevpage(url_add);
document.getElementById("next").onclick = function() {
this.href = nextpage;
console.log(this.href);
};
document.getElementById("prev").onclick = function() {
this.href = prevpage;
console.log(this.href);
};
}();
<a class="button" id="prev" href="#">
<img src="previous.png" alt="PREVIOUS PAGE" style="height: 75px; width: 75px; padding-left 50px, padding-right: 50px;"></a>
<a class="button" id="next" href="#" >
<img src="next.png" alt="NEXT PAGE" style="height: 75px; width: 75px; padding-left 50px, padding-right: 50px;"></a>
It might be a bit more complicated than ideal but it works!

Implementing mouseover/mouseout for many images in an external JavaScript file

I'm trying to enable onMouseOver and onMouseOut for all of my icons and replacing them with unique icons.
Originally I had this:
<img id="EEProfile" src="images/EEProfile.png" alt="Employee Profile" onMouseOver="mouseOver()" onMouseOut="mouseOut()">
External JS file:
function mouseOver() { document.getElementById("EEProfile").src = 'images/EEProfile_Hover.png'; }
function mouseOut() { document.getElementById("EEProfile").src = 'images/EEProfile.png'; }
There are a few issues with this:
This method works on IE but for some reason on Chrome onMouseOut isn't working, so hover images are remaining.
Requires some inline javascript. I'm trying to move towards eliminating all inline JS.
Requires me to hardcode image paths for each and every image on the page.
Since all image paths are the same and follow the same naming convention, which is just
'images/ImageID.png' or 'images/ImageID_Hover.png'
I was hoping to implement something like this:
Pseudocode HTML:
<img id="EEProfile" src="images/EEProfile.png" alt="Employee Profile" onMouseOver="mouseOver(this.id)" OnMouseOut="mouseOut(this.id)">
Pseudocode JavaScript:
function mouseOver(id) { document.getElementById("id").src = 'images/id.png'; }
function mouseOut(id) { document.getElementById("id").src = 'images/id_Hover.png'; }
I want to pass over the ID of the image element to the mouseOver and mouseOut functions as a parameter, then use that ID's string literal in the image path so I don't have to hardcode every image's path. Is something like this possible? Is there a way to do this without inline JS?
I've considered using content:hover without JS but it isn't supported in IE.

I would give all the images you want to have the hover effect a specific class name. Then you can get all the element with that class and add event listeners for mouseover and mouseout. I used the current src to determine the new src. You could just as easily get the id with event.target.id and use that to build the src. You also could build the regular expression to match more than just .png files.
(function(window, document, undefined)
{
var images = document.getElementsByClassName('hoverImage');
for (var i = 0; i < images.length; i++) {
images[i].addEventListener('mouseover', imageMouseOver, false);
images[i].addEventListener('mouseout', imageMouseOut, false);
}
})(window, window.document);
function imageMouseOver(event)
{
event = event || window.event;
var image = event.target;
image.src = getNewImagePath(image.src);
console.log(image);
}
function imageMouseOut(event)
{
event = event || window.event;
var image = event.target;
image.src = getNewImagePath(image.src);
console.log(image);
}
function getNewImagePath(path)
{
var newPath;
if (path.indexOf('_Hover') === -1) {
newPath = path.replace('.png', '_Hover.png');
} else {
newPath = path.replace('_Hover', '');
}
return newPath;
}
.hoverImage {
width: 50px;
height: 50px;
}
<img id="1" src="images/1.png" alt="Employee Profile" class="hoverImage">
<img id="2" src="images/2.png" alt="Employee Profile" class="hoverImage">
<img id="3" src="images/3.png" alt="Employee Profile" class="hoverImage">

Mouse over the <a> tag

There is a prompt in the lower left corner When I put the mouse over the tag,
and can u tell me how to forbid this phenomenon.enter image description here

As commented, the behaviour that you wish to stop is a browser's feature.
To avoid this, you will have to simulate anchor's behaviour on your own but as you said you have many anchors and you cannot manually convert them to buttons, you can try following code:
function maskAnchors() {
var els = document.querySelectorAll('a[href]');
console.log("Anchors Found: ", els.length)
for (var i = 0; i < els.length; i++) {
els[i].setAttribute("data-url", els[i].getAttribute('href'));
els[i].removeAttribute("href");
els[i].addEventListener("click", handleClick)
}
}
function handleClick() {
var url = this.getAttribute('data-url');
window.open(url)
}
document.getElementById('btnAdd').addEventListener("click", function() {
var container = document.querySelector('.content');
var link = document.createElement('a')
link.href = "www.google.com";
link.textContent = "This is a newly added link";
container.append(link)
})
document.getElementById('btnMask').addEventListener("click", maskAnchors)
window.addEventListener('load', maskAnchors)
.maskedAnchor {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
<div class="content">
Google
Facebook
StackOverflow
YouTube
Example
<a>blabla</a>
</div>
<button id="btnAdd">Add Anchor</button>
<button id="btnMask">Run masking</button>
Note:
Removing href will change styling. You will also have to do that manually.
This will not handle any anchors added dynamically after execution of this function. You will have to call this function again. I have optimised function to only fetch anchors that has href
Hope it helps!

Dynamically Add Code to IFrame without Reloading HTML or Javascript

Weave: http://kodeweave.sourceforge.net/editor/#5dbb5ce4a85bcaf4c5805e337c829e73
I have three textareas:
1 for HTML
1 for CSS
and 1 for JavaScript code
Whenever code is added in these textareas (I'm using keyup for the same of this post) I call a function called runEditor which adds the code into the iframe.
What I'm trying to figure out is how can I call the same function when CSS is added without adding the HTML or the JavaScript again?
var htmlEditor = document.querySelector(".html")
var cssEditor = document.querySelector(".css")
var jsEditor = document.querySelector(".js")
function runEditor() {
var previewFrame = document.querySelector(".preview")
var preview = previewFrame.contentDocument || previewFrame.contentWindow.document
preview.open()
preview.write("<style>"+ cssEditor.value +"</style>" + htmlEditor.value + "<scr"+"ipt>"+ jsEditor.value +"</scr"+"ipt>")
preview.close()
}
runEditor()
htmlEditor.onkeyup = function() {
runEditor()
}
cssEditor.onkeyup = function() {
runEditor()
}
jsEditor.onkeyup = function() {
runEditor()
}
textarea {
width: 30%;
height: 100px;
}
.preview {
width: 100%;
}
<textarea class="html">
<button>
Hello world
</button>
<div class="output"></div>
</textarea>
<textarea class="css">body {
background: #52b165;
}</textarea>
<textarea class="js">
var output = document.querySelector(".output")
var btn = document.querySelector("button")
var counter = 0
function addElm() {
var node = document.createElement("div")
var txt = document.createTextNode("hi " + counter++)
node.appendChild(txt)
output.appendChild(node)
}
btn.addEventListener("click", function() {
addElm()
})
</textarea>
<iframe class="preview" sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts"></iframe>

When you set up the iframe, you have access to both window and document objects inside the iframe. You have access to methods like document.getElementById and friends.
To reload the CSS, suggesting you create a <style> element in the iframe. When CSS changes, wipe out the contents of that element and put in the new CSS. HTML can do the same, wiping out the HTML of <body> and replacing it with the new HTML. innerHTML will be your friend. JS will be a bit tricky. You will need to recreate the iframe from the beginning to start fresh.