We Keep Coding

How to give typewrite effect to each title using js?

So, on my website, i have 8 title strings, and i want to give for each one type write effect by scrolling (only one time).
I have already written some code to detect only title that i need by scrolling,
so by scrolling, i start typeWriteEffect function with param string (so i only get title that i want to animate):
let titleStrings = [];
function typeWriteEffect(string) {
if (!titleStrings.includes(string)) {
titleStrings.push(string);
}
console.log(titleStrings);
}
And now one question, how is it better to give effect for each title only once?

adding images to a span

i am creating a black jack game, and im trying to have the suit appear next to the card that is drawn. However the suit is only showing on the last card drawn, but i want it to be shown after every card thats drawn.
const drawCard = () => {
getCardValue() //returns value from ace-k
getCardSuit() //return heart, spade etc. and sets the corresponding src to img
let cardSpan = document.createElement('span');
cardSpan.innerHTML = ` ${cardNumber} ${cardSuit} `
cardSpan.appendChild(img)
playerHand.append(cardSpan)
}
(im using helper functions to get the card number and card suit). The above code is creating a new span for every card, but like i said only the last card is appending the image. when i console.log it in dev tools i get this
<span>3 clubs</span>
<span>
5 Hearts
<img src... etc>
</span>
any body know how i can get it to appear next to every card? thank you.

Sounds like you only have one image, which is already appended somewhere else, so it moves to the other span. How about:
const image = document.createElement('image')
image.src = ???
cardSpan.appendChild(image)

How can the same button play different videos every time it's clicked?

I'm trying to hack together a video player to play local files in a cool interface, it's literally only ever going to be used by my family so the code doesn't have to be beautiful or anything. I've basically got a table full of DVD covers, and when clicked each one of them is supposed to open a modal with a video player for Chrome.
I've managed to do all of this, except I'm struggling to get it so the same button/image can be pressed and a different video file gets shown. Basically this is what I've got inside every table cell:
<th>
<div class="imageBox">
<div class="imageInn">
<img id="standardDVD" src="images/dvdCover1.jpg" alt="Snow">
<div class="hoverImg">
<img id="buttonPlay" src="images/play.png" alt="play">
</div>
</div>
</div>
</th>
I've then got the following JavaScript code to show the modal when that's clicked (I basically took it from here and modified it to show a video instead):
var playButton = document.getElementById('buttonPlay');
playButton.onclick = function(){
modal.style.display = "block";
document.getElementById("videoModal").src = videoToPlay;
}
var dvdCover = document.getElementById('standardDVD');
dvdCover.onclick = function(){
modal.style.display = "block";
document.getElementById("videoModal").src = videoToPlay;
}
(I've got two basically identical ones so it works if either the DVD cover or the button is clicked)
My thinking was to try and somehow get the src of the image (which should be doable if it's the image that's clicked, but I'm not too sure about how to get the dvd cover src if the button is the one getting clicked. From there I was thinking of having a simple (but long) JavaScript if function to convert each DVD cover to the src of the right video file, and simply change the videoToPlay variable used in the modal:
var videoToPlay = "movies/a Movie.mp4";
Edit since I don't think I was clear: I have a table with 55 different DVD covers, each in one cell and each with the identical HTML code except with a different dvdCover1.jpg image. What I'm trying to do is get it so each one plays the correct video, without having to make a new function for each.
I realize this is definitely not best practice, and any suggestions to improve the overall setup are appreciated - although I'm trying to get this together for Christmas and my knowledge of HTML and CSS is basically zero which is why I'm currently going for simplicity: only 5 people will ever see this anyway so best practice isn't necessarily important!

One option is to create an array with all your movies paths:
var videosToPlay = [
"movies/a Movie.mp4",
"movies/movie a.mp4",
"movies/a new Movie.mp4"
];
Then you need to get all handlers like this:
var dvdsCover = document.getElementsByClassName('standard-dvd-class-in-all-table');
Then just define the click event to all of them using the matching index. Your array must match the full table order of DVDs:
[...dvdsCover].forEach((dvdCover, index) => {
dvdCover.onclick = () => {
modal.style.display = "block";
document.getElementById("videoModal").src = videosToPlay[index];
};
});
Hope it helps.

Javascript Random Clickthrough

I am creating an image which, when you click on it, sends you to one of four links. I have managed to code this, but the problem I am having is that it is completely random (only part of the point). What I would like to be able to do is to randomise the first click through, and then if the user goes back to the image, only leave them with the remaining three destinations, and then obviously two and one at the end. This is to stop them theoretically ending up at the same link every single time and not being able to access the other three.
Does anybody know how I might be able to do this? The code I have currently is:
<img src="IMAGE" onclick="randomLink();">
<script type="text/javascript">
var randomLink = function () {
var links = ["LINK 1","LINK 2","LINK 3","LINK 4",];
var max = (links.length)
var randomNumber = Math.floor(Math.random()*max);
var link = links[randomNumber];
window.location = "http://" + link;
}
</script>

You can simply remove the selected entry from the links array (i.e. using Array.splice). Next time the user clicks the link, you would generate a random number between 0 and 2 only and so on.

Why can only my most recently added page element be resized?

I have a webpage where I can click on it to add a image. If I then click on the image it makes it bigger and if I click again it resizes it back to the original size.
If I then click somewhere else on the screen I can create another image and grow and shrink this also by clicking on it.
The problem is only the latest image can be resized by clicking even though none of the vars are being removed or changed.
This is part of a game I am working on.
I made a sample page with the least possible code to try it out and can be got here.
http://johncleary.net/hg/
What I want is to be able to click on any image at any time and it will grow and shrink

From the code on your page, I see that you are using innerHTML += ... to add new images - this isn't a very good thing, because it causes the browser to recreate all the inner elements every time you do so, and this could cause weird interactions with event handlers.
Consider using DOM methods to create and add elements, for example:
var e = document.createElement('img');
e.id = id;
e.onclick = pieceClicked; // No parameter required, this.id is available directly inside the function
...
board.appendChild(e);
Some other side notes:
You're using xPix * yPix as part of the ID: if you expect this to be unique, it may not be. For example, x = 500, y = 10 and x = 10, y = 500 will result in the same ID. How about just using xPix + ',' + yPix as a string by itself?
The several lines in which you initialize Pieces[id] can be reduced to a simpler form using object notation: Pieces[id] = { Piece: ..., xPix: ..., yPix: ... }.