We Keep Coding

I Need these images to have links what am I doing wrong?

right guys this is driving me crazy will someone just tell me straight how to make these images links to pages such as test1.html,test2.html,test3.html and rather than tell me what to change just paste the entire fixed code so that i can test it im new to javascript and hate it
function getRandomImage() {
//declare an array to store the images
var randomImage = new Array();
//insert the URL of images in array
randomImage[1] = "frames/1.png";
randomImage[2] = "frames/2.png";
randomImage[3] = "frames/3.png";
randomImage[4] = "frames/4.png";
randomImage[5] = "frames/5.png";
randomImage[6] = "frames/6.png";
randomImage[7] = "frames/7.png";
randomImage[8] = "frames/8.png";
randomImage[9] = "frames/9.png";
randomImage[10] = "frames/10.png";
//loop to display five randomly chosen images at once
for (let i=0; i< 1; i++) {
//generate a number and provide to the image to generate randomly
var number = Math.floor(Math.random()*randomImage.length);
//print the images generated by a random number
document.getElementById("result").innerHTML += '<img src="'+ randomImage[number].src +'" style="width:450px" />';
}
}
<button onclick="getRandomImage()">Show Image</button>
<div class="container">
<span id="result" align="center"></span>
</div>

For the link, you'll want to associate your image and link together, assuming that each link has a specific image to be associated with. So let's update your random images and well also need to surround the img tag with an anchor tag, something like:
randomImage[1] = {
src: "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg",
href: "/index1.html"
}
// update the rest of the links accordingly, then:
'<img src="'+ randomImage[number].src +'" style="width:450px" />'
(updated per comment)

You need to enclose the image in the tag.
//declare an array to store the images
var randomImage = new Array();
//insert the URL of images in array
randomImage[1] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link
randomImage[2] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link
randomImage[3] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link
randomImage[4] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link
randomImage[5] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link
randomImage[6] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link
randomImage[7] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link
randomImage[8] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link
randomImage[9] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link
randomImage[10] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link
//loop to display five randomly chosen images at once
for (let i=0; i< 1; i++) {
//generate a number and provide to the image to generate randomly
var number = Math.floor(Math.random()*randomImage.length);
//print the images generated by a random number
document.getElementById("result").innerHTML += '<img src="'+ randomImage[number] +'" style="width:450px" />';
}
}

move the array outside the function
shuffle the array
take the first 5
wrap in A
function fy(a, b, c, d) { // https://stackoverflow.com/a/25984542/295783
c = a.length;
while (c) b = Math.random() * (--c + 1) | 0, d = a[c], a[c] = a[b], a[b] = d
}
// declare an array to store the images AND their href
const images = [{
src: "https://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg",
href: "aaa.html"
},
{
src: "https://www.petsworld.in/blog/wp-content/uploads/2018/01/cute_dogsurprise_petsworld.jpg",
href: "bbb.html"
},
{
src: "https://www.petsworld.in/blog/wp-content/uploads/2016/09/dogs-300x200.gif",
href: "ccc.html"
},
{
src: "https://www.petsworld.in/blog/wp-content/uploads/2018/01/dog-hates-stairs-BF0505-001-resized-56a26a793df78cf772755e08-1024x682.jpg",
href: "ddd.html"
}, {
src: "https://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg",
href: "eee.html"
},
{
src: "https://www.petsworld.in/blog/wp-content/uploads/2018/01/cute_dogsurprise_petsworld.jpg",
href: "fff.html"
},
{
src: "https://www.petsworld.in/blog/wp-content/uploads/2016/09/dogs-300x200.gif",
href: "ggg.html"
},
{
src: "https://www.petsworld.in/blog/wp-content/uploads/2018/01/dog-hates-stairs-BF0505-001-resized-56a26a793df78cf772755e08-1024x682.jpg",
href: "hhh.html"
},
]
document.getElementById("show").addEventListener("click", function() {
fy(images);
document.getElementById("result").innerHTML = images.slice(0, 5).map(img => `<img src="${img.src}" style="width:450px" />`).join("")
})
<button type="button" id="show">Show Image</button>
<hr/>
<!--image displays here-->
<span id="result" align="center"></span>

You can use document.createElement() rather than using innetHTML
function getRandomImage() {
//declare an array to store the images
var randomImage = new Array();
//insert the URL of images in array
randomImage[1] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link
randomImage[2] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link
randomImage[3] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link
randomImage[4] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link
randomImage[5] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link
randomImage[6] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link
randomImage[7] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link
randomImage[8] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link
randomImage[9] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link
randomImage[10] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg"; //i need this image here to be a link
//loop to display five randomly chosen images at once
for (let i = 0; i < 1; i++) {
//generate a number and provide to the image to generate randomly
var number = Math.floor(Math.random() * randomImage.length) + 1;
//print the images generated by a random number
const link = document.createElement('a')
link.target = '__blank__';
link.href = randomImage[number];
const img = document.createElement('img');
img.src = randomImage[number];
link.appendChild(img);
document.getElementById("result").appendChild(link);
}
}
<button onclick="getRandomImage()">Show Image</button>
<!--image displays here-->
<span id="result" align="center"></span>

Button Click Audio Start and Stop JS

Wondering how to stop the current audio and have a new one start? Right now the audio overlays each other and it can get very jumbled. I currently have an array of random audio that plays. However, if you click the buttons in quick succession the audio will overlap. I am not opposed to having the button be unclickable until the audio stops as well.
<script type = "text/javascript">
//Create random picture array
function imgchange() {
var myImages1 = new Array();
myImages1[1] = "Matthew1.jpg";
myImages1[2] = "Matthew2.jpg";
myImages1[3] = "Matthew3.jpg";
myImages1[4] = "Matthew4.jpg"; //Image Array
myImages1[5] = "Matthew5.jpg";
myImages1[6] = "Matthew6.jpg";
myImages1[7] = "Matthew7.jpg";
var rnd = Math.floor(Math.random() * myImages1.length); // Random Choice of Image
if (rnd == 0) {
rnd = 1;
}
document.getElementById("gen-img").src = myImages1[rnd]; //Gets Image
}
function playRandomSound() {
//An array to house all of the URLs of your sounds
var sounds = [
new Audio("Sound1.mp3"),
new Audio("Sound2.mp3"),
new Audio("Sound4.mp3")];
//This line will select a random sound to play out of your provided URLS
var soundFile = sounds[Math.floor(Math.random() * sounds.length)];
soundFile.play();
//Find the player element that you created and generate an embed file to play the sound within it
document.getElementById("Button").innerHTML = '<embed src="' + soundFile + '" hidden="true" autostart="true" loop="false" />';
}
</script>
<body style="height: 663px">
<div class="Title" id="title">Alright! Alright! Alright!</div>
<p><img id="gen-img" src="img/who/1.jpg"></p>
<p> <input id="Button" type="button" value="Random" onclick="imgchange(); playRandomSound();"/></p>
</body>

Consider the following code.
$(function() {
function pickRandom(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
function imgChange() {
var myImages = [
"https://i.imgur.com/dDRchZA.jpg",
"https://i.imgur.com/4ILisqH.jpeg",
"https://i.imgur.com/YkxAggs.png",
"https://i.imgur.com/ZZhIZ9K.jpg",
"https://i.imgur.com/UeLNtOi.png",
"https://i.imgur.com/saWRUwn.png",
"https://i.imgur.com/xM0RWTd.png"
];
$("#gen-img").attr("src", pickRandom(myImages));
}
function playRandomSound() {
var aud;
var sounds = [
"Sound1.mp3",
"Sound2.mp3",
"Sound4.mp3"
];
if ($("audio").length) {
aud = $("audio");
} else {
aud = $("<audio>", {
type: "audio/mp3"
}).css("display", "none").appendTo("body");
}
aud[0].pause();
aud[0].currentTime = 0;
aud.attr("src", pickRandom(sounds));
aud[0].play();
}
$("#Button").click(function() {
imgChange();
playRandomSound();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Title" id="title">Alright! Alright! Alright!</div>
<p><img id="gen-img" src="https://i.imgur.com/xM0RWTd.png" width="640"></p>
<p><input id="Button" type="button" value="Random" /></p>
I would just store the Source in the Array not the Object. Then using HTML5, you can create (and hide) an <audio> tag with all the proper properties. Once created, you can call the DOM Element Methods for .play().
You can use:
aud[0].play();
Or:
aud.get(0).play();
See more: https://api.jquery.com/get/

How to click on a dynamically created link to then create a new dynamic page from that link?

I wrote an custom API(node.js app) that gets the info about the blogs from medium.com, right now there is
the author/main pic of the article,
title,
link to the article on medium.com(redundant),
the entire article text, in the JSON output.
Sample API/JSON:
{
"img": [
"https://upload.wikimedia.org/wikipedia/commons/4/42/Blog_%281%29.jpg"
],
"title": [
"The old and the new or not so new: Java vs JavaScript"
],
"link": [
"https://medium.com/#aki9154/the-old-and-the-new-or-not-so-new-java-vs-javascript-760f84e87610?source=rss-887f1b1ddb75------2"
],
"desc": [
"<p>It’s funny how the name JavaScript makes you believe that it is somehow..."
]
}
Then i am polling this API/JSON and spitting out the output in a thumbnail format, basic html for now(no design/CSS).
Where i am stuck is when a user clicks on a thumbnail and i need to make sure that i display the correct article?!
For which i need to display a new page when the thumbnail/article is clicked, i can use #4 from JSON above as an output for that dynamically created new page and put it out nicely)
The issue that i am facing now is how to dynamically produce the correct article when the dynamically created link is clicked?
Right now nothing happens when i click on the thumbnail and that's what this project link displays...
I did some stackoverflow research and read some jQuery docs(event propagation and more...) and was able to make changes to the index.js, below is how it looks like but nothing works, any help will be appreciated...
index.js:
$(function () {
var desc = "";
function newWin() {
var w = window.open();
$(w.document.body).html('<p>'+desc+'</p>');
}
var $content = $('.cards-in-grid');
var url = 'link-for private use now';
$.get(url, function (response) {
var output = '';
console.log(response);
$.each(response, function (k, item) {
title = item.title;
var author = item.img;
desc = item.desc;
output += '<li><img src="'+author+'" alt=""><h2>' + title + '</h2></li>';
$(".cards-in-grid ul").on("click", "li", function(){
newWin;
});
return k;
});
$content.html(output);
});
});

`
$(function () {
var $content = $('.cards-in-grid');
var url = 'link-for private use now';
$.get(url, function (response) {
var output = '';
var list = "li";
$.each(response, function (k, item) {
var listNum = list+k;
var idy = "#"+listNum;
var desc = "";
title = item.title;
var author = item.img;
desc = item.desc;
//GIVE ID to each LI using a variable
output += '<li id="'+listNum+'"><img src="'+author+'" alt=""><h2>' +
title + '</h2></li>';
$content.html(output);
$content.on("click",idy, function(){
var w = window.open();
$(w.document.body).html('<p>'+desc+'</p>');
});
return k;
});
});
});
This worked perfectly, some thinking and pondering and was able to make it work!!
Kindly Upvote the answer, if it helped you! Thanks!

Append audio in every exercise to div using JQUERY

how are you doing?
I am trying to build a quiz app, and i can't discover how I append the audio of a specific question to the screen.
Basically, the user sees a question, three answers, and an audio.
How would I point each audio to the current exercise?
It is recognizing the first audio, but when I jump to the second question, it shows two audio players aligned and then they disappear.
The HTML file:
<div id="navContent">
<div id="game1"></div>
<div id="game2"></div>
<div id="audioContainer"></div>
<div id="audioContainer2"></div>
</div>
The JS
$(document).ready(function () {
var questionNumber=0;
var audioNumber=0;
var questionBank=new Array();
var stage="#game1";
var stage2=new Object;
var evento = "#audioContainer";
var evento2 = new Object;
var questionLock=false;
var numberOfQuestions;
var score=0;
$.getJSON('../../core/part1.json', function(data){
numberOfQuestions = data.primeiro.length;
for(i = 0; i < numberOfQuestions; i++){
questionBank[i] = [];
questionBank[i].push(data.primeiro[i].question);
questionBank[i].push(data.primeiro[i].option1);
questionBank[i].push(data.primeiro[i].option2);
questionBank[i].push(data.primeiro[i].option3);
questionBank[i].push(data.primeiro[i].audio);
}
displayQuestion();
});
function displayQuestion(){
var q1;
var q2;
var q3;
var audioFile = questionBank[questionNumber][4];
var rnd=Math.random()*3;
rnd=Math.ceil(rnd);
var wordsShow = $('<li class= "center_txt"><div id="1" class="word-pt bluedark_txt">'+q5+'</div><div id="2" class="bluish_txt word-EN">'+q4+'</div></li>')
var audioShow = $('<audio controls id="audioPlayer"><source src='+audioFile+' type="audio/mp3"></audio>');
if(rnd==1){q1=questionBank[questionNumber][1];q2=questionBank[questionNumber][2];q3=questionBank[questionNumber][3];}
if(rnd==2){q2=questionBank[questionNumber][1];q3=questionBank[questionNumber][2];q1=questionBank[questionNumber][3];}
if(rnd==3){q3=questionBank[questionNumber][1];q1=questionBank[questionNumber][2];q2=questionBank[questionNumber][3];}
$(stage).append('<div class="questionText">'+questionBank[questionNumber][0]+'</div><div id="1" class="option">'+q1+'</div><div id="2" class="option">'+q2+'</div><div id="3" class="option">'+q3+'</div>');
//here is where I try to append the audio, not working
$("#audioContainer").append(audioShow);
$('.option').click(function(){
if(questionLock==false){questionLock=true;
//correct answer
if(this.id==rnd){
// $("#feedbackBox").append('<div class="feedback1">CORRECT</div>');
score++;
}
//wrong answer
if(this.id!=rnd){
// $("#feedbackBox").append('<div class="feedback2">WRONG</div>');
}
setTimeout(function(){changeQuestion()},1000);
}})
}//display question
function changeQuestion(){
questionNumber++;
wordNumber++;
audioNumber++;
if(stage=="#game1"){stage2="#game1";stage="#game2";}
else{stage2="#game2";stage="#game1";}
if(evento=="#audioContainer"){evento2="#audioContainer";evento="#audioContainer2";}
else{evento2="#audioContainer2";evento="#audioContainer";}
if(questionNumber<numberOfQuestions){displayQuestion();}else{displayFinalSlide();}
$(stage2).animate({"right": "+=800px"},"slow", function() {$(stage2).css('right','-800px');$(stage2).empty();});
$(stage).animate({"right": "+=800px"},"slow", function() {questionLock=false;});
$(evento2).animate({"right": "+=800px"},"slow", function() {
$(evento2).css('right','-800px');
$(evento2).empty();});
$(evento).animate({"right": "+=800px"},"slow", function() {questionLock=false;});
}//change question
THANK YOU!

How would I capture the 'alt' attribute for the images a user selects from this slideshow?

How can I modify this script to capture the 'alt' attribute for the images a user selects in a slideshow?
This code displays a series of 20 pairs of images and asks users to select their preferences. Each time the user clicks one of the 'Select' buttons, the 'manipulateDOM()' function advances to the next set of items in the the text and image arrays. However, since it's not set up as a typical form field, I'm having difficulty figuring out how to capture the value of each selection so that it can be submitted to the database with the rest of the form values.
I tried creating a function with the click() method to (at the very least) capture the src value, but I can't get the syntax right so that it can run in conjunction with the 'manipulateDOM()' function. I'd also much rather capture the 'alt' attribute, but I couldn't figure out how to do that.
Function I was experimenting with:
$(document).ready(function () {
$("#buttons").click(function () {
var imgvalue = $("#imgtrendy").attr("src");
$("#picval").text(imgvalue);
document.write(imgvalue + ', ');
});
});
Existing Code:
Javascript - manipulateDOM() and manipulateDOM1() functions
var NumberOfImages = 3 - 1; //-1 because array members starts from 0
var trendy = new Array(NumberOfImages);
trendy[0] = "files/set1/A1.jpg";
trendy[1] = "files/set1/B1.jpg";
trendy[2] = "files/set1/C1.jpg";
var imgNumber = 1; //array key of current image
var NumberOfImages = 3 - 1;
var classic = new Array(NumberOfImages);
classic[0] = "files/set1/A2.png";
classic[1] = "files/set1/B2.jpg";
classic[2] = "files/set1/C2.jpg";
var classicNumber = 1;
var text = 3 - 1;
var text = new Array;
text[0] = "Which would you be more likely to wear?"
text[1] = "Which look is more you?"
text[2] = "Which would you rather wear?"
var textNumber = 1;
function manipulateDOM() {
changeObjects();
NextImage();
}
function changeObjects() {
document.getElementById("question").innerHTML = text[textNumber];
}
function NextImage() {
if (imgNumber < NumberOfImages) //Stop moving forward when we are out of images
{
imgNumber++;
document.images["taste"].src = trendy[imgNumber];
document.images["taste1"].src = classic[imgNumber];
textNumber++;
document.getElementById["question"].innerHTML = text[textNumber];
document.getElementById["selectButton"].innerHTML = text[textNumber];
}
}
function manipulateDOM1() {
changeObjects();
NextImage1();
}
function NextImage1() {
if (imgNumber < NumberOfImages)
{
imgNumber++;
document.images["taste"].src = trendy[imgNumber];
document.images["taste1"].src = classic[imgNumber];
textNumber++;
document.getElementById["question"].innerHTML = text[textNumber];
document.getElementById["selectButton"].innerHTML = text[textNumber];
}
}
HTML
<form id="taste" name="taste" method="post" action="taste-exec.php" >
<h2 id="question"> Which would you be more likely to wear?</h2>
<table><tr>
<td><img id="imgtrendy" src="files/set1/A1.jpg" name="taste" value="trendy[1]" /></td>
<td><img id="imgclassic" src="files/set1/A2.png" name="taste1" value="classic[1]" /></td></tr>
<tr id="buttons">
<td><img id="trendyButton" alt"Select" src="files/Select.jpg" onclick="javascript:manipulateDOM()"></td>
<td ><img id="classicButton" alt"Select" src="files/Select.jpg" onclick="javascript:manipulateDOM1()"></td>
</tr><tr>
<td id="picval"></td>
<td><input name="answer" id="answer" type="text" /></td>
</tr></table>
</form>

You get the alt attribute using also the attr method and alt as parameter, just like you are already doing with src. You could try:
function changeObjects() {
document.getElementById("question").innerHTML = text[textNumber];
var imgvalue = $("#imgtrendy").attr("alt");
$("#picval").text(imgvalue);
}
Edit: Example of keeping data in one single array
//to save it
var alt = $("#imgtrendy").attr("alt");
var fileName= 'someValue';//populate accordingly
var myArray[index] = alt + '|' + fileName;
//to retrieve it
var bothValues = myArray[index].split('|'); //gives you an array
alt = bothValues[0] //contains alt at index 0
fileName = bothValues[1] //contains fileName at index 1