Zmiana wartości po kliknięciu na przycisk

[MPCpiotr]

Witam. Potrzebuje zrobić coś takiego, aby po naciśnięciu buttona na stronie zmieniło wartość (zaznaczoną na czerwono w kodzie) na randomową, ale z zakresu np od 1 do 25, i dobrze żeby każda była inna ale nie musi. Uczę sie dopiero HTML i dużo jeszcze przede mną, dlatego proszę o pomoc

 

<marquee direction="right" scrollamount="4" >
<img src="obrazek.JPG" width="80" height="60"  />
</marquee>

<hr />

<marquee direction="right" scrollamount="6" >
<img src="obrazek.JPG" width="80" height="60"  />
</marquee>

@edit

Drugie pytanie. Znalazłem taki skrypt:

<script>
function F(x,y){
   x.d = x.d? (x.start(),false):(x.stop(),true);
   y.value = x.d?'Wznów':'Zatrzymaj';
}
</script>
<input name="" type="button" value="Zatrzymaj" onclick="F(document.getElementById('anim'),this)">

i tu kieruje moje pytanie, jak do tego('anim') dopisać kolejne "id", np anim2, anim3 itd

 

[seweryn55]

<marquee direction="right" id="anim" scrollamount="100" >
<img src="obrazek.JPG" width="80" height="60"  />
</marquee>

<hr />

<marquee direction="right" id="anim" scrollamount="6" >
<img src="obrazek.JPG" width="80" height="60"  />
</marquee>

<input name="" id="stopBtn" onclick="toggle()" type="button" value="Zatrzymaj" />
<input name="" onclick="randomSpeed()" type="button" value="Losuj prędkość" />

<script>
var items = document.querySelectorAll("#anim");
var stopBtn = document.querySelector("#stopBtn");

function toggle(){
	items.forEach(function(item) {
  		item.d = item.d ? (item.start(),false):(item.stop(),true);
	});

   stopBtn.value = items[0].d ? 'Wznów':'Zatrzymaj';
}

var max = 25;
var min = 1;
function randomSpeed() {
	items.forEach(function(item) {
		var number = Math.floor((Math.random() * max) + min);
		item.setAttribute("scrollamount", number);
	});
}
</script>

 

[MPCpiotr]

4 godziny temu, seweryn55 napisał:

<marquee direction="right" id="anim" scrollamount="100" >
<img src="obrazek.JPG" width="80" height="60"  />
</marquee>

<hr />

<marquee direction="right" id="anim" scrollamount="6" >
<img src="obrazek.JPG" width="80" height="60"  />
</marquee>

<input name="" id="stopBtn" onclick="toggle()" type="button" value="Zatrzymaj" />
<input name="" onclick="randomSpeed()" type="button" value="Losuj prędkość" />

<script>
var items = document.querySelectorAll("#anim");
var stopBtn = document.querySelector("#stopBtn");

function toggle(){
	items.forEach(function(item) {
  		item.d = item.d ? (item.start(),false):(item.stop(),true);
	});

   stopBtn.value = items[0].d ? 'Wznów':'Zatrzymaj';
}

var max = 25;
var min = 1;
function randomSpeed() {
	items.forEach(function(item) {
		var number = Math.floor((Math.random() * max) + min);
		item.setAttribute("scrollamount", number);
	});
}
</script>

 

A dało by się zrobić żeby losowa prędkość była bez przycisku, tylko po wejściu na stronę?

I o ile się nie mylę losuje tylko dla pierwszego obrazka

[seweryn55]

5 minut temu, MPCpiotr napisał:

A dało by się zrobić żeby losowa prędkość była bez przycisku, tylko po wejściu na stronę?

I o ile się nie mylę losuje tylko dla pierwszego obrazka

W tym przypadku jest querySelectorAll czyli pobiera wszystko z id "anim". I akurat z marquee masz tak że ta prędkość zmieni się dopiero jak to zrobi taki jeden "kurs" czyli dojdzie do końca i zacznie lecieć od początku. A jak chcesz żeby to było na samym poczatku ustaliło to możesz zrobić tak.
 

var max = 25;
var min = 1;
function randomSpeed() {
	items.forEach(function(item) {
		var number = Math.floor((Math.random() * max) + min);
		item.setAttribute("scrollamount", number);
                item.stop();
                item.start();
	});
}
randomSpeed();

[MPCpiotr]

6 godzin temu, seweryn55 napisał:

W tym przypadku jest querySelectorAll czyli pobiera wszystko z id "anim". I akurat z marquee masz tak że ta prędkość zmieni się dopiero jak to zrobi taki jeden "kurs" czyli dojdzie do końca i zacznie lecieć od początku. A jak chcesz żeby to było na samym poczatku ustaliło to możesz zrobić tak.
 

var max = 25;
var min = 1;
function randomSpeed() {
	items.forEach(function(item) {
		var number = Math.floor((Math.random() * max) + min);
		item.setAttribute("scrollamount", number);
                item.stop();
                item.start();
	});
}
randomSpeed();

Dzięki, działa

[PGS]

Ja tak tylko dorzucając, skoro się uczysz. Nie deklaruj zmiennej za pomocą var... To już dawno przeszło do lamusa. Poczytaj sobie o let i const.

Tutaj masz trochę o stylach pisania w JS. https://medium.freecodecamp.org/google-publishes-a-javascript-style-guide-here-are-some-key-lessons-1810b8ad050b

Lepiej przyzwyczajać się od początku do tego niż potem się męczyć.