I have an array of images which display one by one by click, and block of options in which user could choice what image to look. I want option to connect with array and display the number (or index) of current displaying image. Maybe you suggest me any method how I could do that. Here is my code:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
var Image_array = [
["00.jpg", "1"],
["01.jpg", "2"],
["02.jpg", "3"],
["03.jpg", "4"],
["04.jpg", "5"],
["05.jpg", "6"],
["06.jpg", "7"]
]
function setf(thisv)
{
if (i == Image_array.length) i = 0;
rotatorbutton.src = Image_array[thisv][0];
}
var i = 0;
function right() {
i++;
if (i == Image_array.length) i = 0;
rotatorbutton.src = Image_array[i][0];
}
</script>
</head>
<body >
<div onclick="right()">
<script type = 'text/javascript'>
document.write("<img id = 'rotatorbutton' src = '" + Image_array[0] + "' alt = ''/> ");
</script>
</div>
<div class="pager">
<form name="billy">
<select name="option1" id="option" onchange="setf(this.selectedIndex)">
<script type = "text/javascript">
for (i = 0; i < Image_array.length; i++)
{
document.write("<option>" + Image_array[i][1]);
}
</script>
</select>
<script type="text/javascript">
setf(0);
</script>
</div>
</form>
</div>
<body>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style></style>
<script>
var imageArray = [
["00.jpg", "1"],
["01.jpg", "2"],
["02.jpg", "3"],
["03.jpg", "4"],
["04.jpg", "5"],
["05.jpg", "6"],
["06.jpg", "7"]
]
function addOptions(){
var select = document.getElementById("select")
for(var i = 0; i < imageArray.length; ++i){
var option = document.createElement("option")
option.innerHTML = imageArray[i][1]
select.appendChild(option)
}
}
function addRotation(){
var select = document.getElementById("select")
var image = document.getElementById("image")
select.addEventListener("change", function(event){
image.src = imageArray[this.selectedIndex][0]
})
}
window.addEventListener("load", addOptions)
window.addEventListener("load", addRotation)
</script>
</head>
<body>
<form>
<img src="00.jpg" id="image">
<select id="select">
</select>
</form>
</body>
</html>
I have found a few problems with your code.
You shouldn't use document.write, because there are new and better ways to add content from the script, like using the Document object model.
Like Edwin mentioned you shouldn't use "new Array()".
Also like Edwin mentioned you should indent your code.
In function "setf" you used "i" instead of "thisv".
And you forget to close the tag "".
Above I give you a solution as an example.
Related
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>1</title>
<script src="main.js"></script>
</head>
<body onLoad="OnLoad()">
<form name="form">
<select name="weapons" onChange="SelectWeapon()"></select>
</form>
</body>
</html>
var weaponsArray = [
'Broadsword',
'Crossbow',
'Magic staff'
];
function OnLoad() {
for (var i = 0; i < weaponsArray.length; i++) {
var wepType = "<option value = '" + i + "'>" + weaponsArray[i] + "</option>";
document.forms["form"]["weapons"] += wepType;
}
}
I'm trying to get the elements of the array to add to a select tag using document.forms by adding option tags to the array element and then adding it to the select tag.
I wanted this to end up populating a dropdown on a html page but the dropdown stays empty. I'm new to JavaScript so I am struggling to see where I have gone wrong.
It's possible to use document.createElement to create an option, and then Element.append to add it to the select element:
var weaponsArray = [
'Broadsword',
'Crossbow',
'Magic staff'
];
function OnLoad() {
for (let i = 0; i <weaponsArray.length; i++) {
// create a new option
const option = document.createElement('option');
option.value = i;
option.textContent = weaponsArray[i];
// add the option to the select element
document.forms.form.weapons.append(option);
}
}
<body onLoad="OnLoad()">
<form name="form">
<select name="weapons"></select>
</form>
</body>
I want to loop though the array (array) and display the elements one by one only after clicking the button (bt). When i run this code it shows only the last element of the array (i.e honda). Please help me out
var hints = document.querySelector(".hint");
var array = ["Car", "bmw", "mercy", "porsche", "hyundai", "jeep", "honda"];
var bt = document.querySelector("button");
for (var i = 1; i < 6; i++){
bt.addEventListener("click", function(){
hints.textContent = array[i];
});
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Password</title>
<link rel="stylesheet" href="password.css" type="text/css">
</head>
<body>
<h1 class="hint"></h1>
<button type="button" name="button">Cick me</button>
<script src="password.js" charset="utf-8" type="text/javascript"></script>
</body>
</html>
Everytime, it's showing honda when you click on the button because at the time the click event is triggered the value of i is 6.
So,always when you click, it will always show array[6] value, which is 'honda'.
Anyways, please try the below, it should work:
let hints = document.querySelector(".hint");
let array = ["Car", "bmw", "mercy", "porsche", "hyundai", "jeep",
"honda"];
let bt = document.querySelector("button");
let count = 0;
bt.addEventListener('click', () => {
hints.textContent = array[count];
console.log('clicked!!');
count++;
if (count > array.length) {
console.log('no more values in the array!!');
return false;
}
})
I have also create a codepen for it. You can also have a look:
https://codepen.io/vishalkaului/pen/EbyjML
There is no for loop need. Keep a track of your count, and display the next one on click. See the edited code below:
var hints = document.querySelector(".hint");
var array = ["Car", "bmw", "mercy", "porsche", "hyundai", "jeep", "honda"];
var bt = document.querySelector("button");
var count = 0;
bt.addEventListener("click", function(){
if (count < array.length) {
hints.textContent = array[count];
count++;
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Password</title>
<link rel="stylesheet" href="password.css" type="text/css">
</head>
<body>
<h1 class="hint"></h1>
<button type="button" name="button">Cick me</button>
<script src="password.js" charset="utf-8" type="text/javascript"></script>
</body>
</html>
I have five jpg pictures and on a homepage i want to choose between these five pics by typing 1,2,3,4 or 5 and click OK and then i want that picture to show.
My code looks like this:
var inputElem, msgElem;
function init() {
msgElem = document.getElementById("message");
inputElem = [];
inputElem[1] = document.getElementById("input1");
inputElem[2] = document.getElementById("input2");
inputElem[3] = document.getElementById("input3");
document.getElementById("btn1").onclick = showFruit;
}
window.onload = init;
function showFruit() {
var nr, fruitUrl;
fruitUrl = (fruitImg.src = "pics/fruit" + nr + ".jpg");
nr = Number(input1.value);
fruitImg.src = "pics/fruit" + nr + ".jpg";
fruitUrl = document.getElementById("fruitImg").src = "pics/fruit1.jpg";
The problem is that I can't change the picture.I don't know whats missing, or how to make it choose between pic 1-5.
I have no privilege to write comments, so can't estimate what you actually want. But the resulting effect may be the thing you want.
But have look up below examples (live here). Enter a number then click button.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="image">
<img src="salon1.jpg" id="fruit">
</div>
<input type="number" id="inp">
<input type="submit" id="btn1" onclick="showFruit('inp')">
<script type="text/javascript">
makeImageFromNum = function (n) {
var nr = document.getElementById(n).value;
if (parseInt(nr)>5) {
nr = 5;
}
else if (parseInt(nr)<1) {
nr = 1;
}
return "salon"+nr+".jpg";
}
showFruit = function (n) {
document.getElementById("fruit").src = makeImageFromNum(n);
}
</script>
</body>
</html>
In below example (live here) just change the number - no need to click a button, there is no any actually :)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="image">
<img src="salon1.jpg" id="fruit">
</div>
<input type="number" id="inp" onchange="showFruit(this.value)">
<script type="text/javascript">
makeImageFromNum = function (nr) {
if (parseInt(nr)>5) {
nr = 5;
}
else if (parseInt(nr)<1) {
nr = 1;
}
return "salon"+nr+".jpg";
}
showFruit = function (n) {
document.getElementById("fruit").src = makeImageFromNum(n);
}
</script>
</body>
</html>
Note that you're always assinging the first image in this line of code (the last Iine if your code)
fruitUrl = document.getElementById("fruitImg").src = "pics/fruit1.jpg";
So, you'll always see image one
can you please kindly assist me with this code? I am trying to populate a list of images when a button is clicked.. The screenShotsList.txt consists of files names such as:
out1.png
out2.png
out3.png
out4.png
out5.png
out6.png
out7.png
out8.png
Right now, my problem is idk the syntax to display my array as a group of images and the code does not work when a button is clicked.
Here is the code I have so far..
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$("button").click(function(){
var file = "C:/newbots/ctfuPoster/data/screenShotsList.txt";
function getFile(){
$.get(file,function(txt){
var lines = txt.responseText.split("\n");
for (var i = 0, len = lines.length; i < len; i++) {
// Equivalent: $(document.createElement('img'))
var img = $('<img id="dynamic">');
img.attr('src', lines[i]);
img.appendTo('#imagediv');
}
});
}
});
</script>
Thank you in advance
For this example you have a simple html page with a little script
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex,nofollow" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
$.ajax({
url : "screen.TXT",
dataType: "text",
success : function (data) {
console.log(data)
var lines = data.split(",")
for (var i = 0; i < lines.length; i++) {
var img = $('<img class="dynamic">');
img.attr('src', lines[i]);
img.appendTo('#imageDiv');
}
}
});
});
})
</script>
</head>
<body>
<div id="imageDiv"></div>
<input value="clickMe" type="button" id="button">
</body>
</html>
For the operation of the script i created a simple text file with the following structure and name screen.txt. This text file contains links to pictures of lorempixel.com must be at the same level of html page
screen.txt file:
http://lorempixel.com/output/abstract-q-c-300-300-7.jpg,
http://lorempixel.com/output/abstract-q-c-300-300-9.jpg,
http://lorempixel.com/output/abstract-q-c-300-300-2.jpg
For online working example visit: this page
How can I parse the value of status = 'logged-out' to the 3 tags below it, updating the value of login_status = 'logged-out'?
<script type="text/javascript">
window.ndm = window.ndm || {};
window.ndm.cam = {'status':'logged-out'};
</script>
<script src="http://foo.com/adserver/ndm/js.php?position=header-ad§ion_id=NEWS&login_status=SUBSCRIBER"></script>
<script src="http://foo.com/adserver/ndm/js.php?position=middle-ad§ion_id=NEWS&login_status=SUBSCRIBER"></script>
<script src="http://foo.com/adserver/ndm/js.php?position=footer-ad§ion_id=NEWS&login_status=SUBSCRIBER"></script>
Keep in mind, there also heaps of other script tags on the page, so to identify the relevant ones. I got this function.
function getScriptSourceName(name){
var scripts = document.getElementsByTagName('script');
for (i=0;i<scripts.length;i++){
if (scripts[i].src.indexOf(name) > -1)
return scripts[i].src;
}}
Therefore to find the relevant script tags I want, i call the function - getScriptSourceName('foo.com');
How can I then update the login_status parameter's value to use the one declare at the very top?
I think this should work (below the HTML file for testing).
Look at changeStatus method (I triggered it by button click for testing).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script type="text/javascript">
window.ndm = window.ndm || {};
window.ndm.cam = {'status':'logged-out'};
</script>
<script src="http://foo.com/some.php?login_status=SUBSCRIBER"></script>
<script src="http://foo.com/some.php?login_status=SUBSCRIBER"></script>
<script src="http://foofoo01.com/some.php?login_status=SUBSCRIBER"></script>
<script>
function changeStatus(name)
{
var scripts = document.getElementsByTagName('script');
var scriptsToChange = [];
for (var i = 0; i < scripts.length; i++)
{
if (scripts[i].src.indexOf(name) > -1)
{
var oldSrc = scripts[i].src;
var newSrc = oldSrc.replace(/(login_status=).*/,'$1' + 'logged-out');
scripts[i].setAttribute("src", newSrc);
scriptsToChange.push(scripts[i]);
}
}
for (var k = 0; k < scriptsToChange.length; k++)
{
document.getElementsByTagName("head")[0].appendChild(scriptsToChange[k]);
}
}
</script>
</head>
<body>
<button type="button" onclick="changeStatus('foo.com')">Change status</button>
</body>
</html>