Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Input type="img" onclick !

1
Skriv svar
Permalänk
Medlem
●

Input type="img" onclick !

Min kod som ökar värdet med 1 varje gång jag klickar.

<script>
function incrementValue()
{
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number').value = value;

}
</script>

Varje gång jag klickar på knappen så ökar värdet. Funkar jättebra.

<input type="button" onclick="incrementValue()" value="Increment Value"

Skulle ändra till att "Varje gång bilden klickas så ökar värdet"

<input type="img" src="xxx.jpg" onclick="incrementValue()" value="Increment Value"

Nu blev det helt knas. Sidan reloadar varje gång bilden klickas på och urlen får X och Y koordinater. /// .php?x=169&y=163

(värdet ökar med 1 när jag trycker på bilden men sidan reloadas...)

Tack på förhand.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Tjena!

Jag skulle göra såhär istället:

<script>
var value = 0;
function incrementValue(){
value++;
console.log('Value: ' + value);
}
</script>
<body>
<!-- Bara en vanlig input knapp -->
<input type="button" onclick="incrementValue()" value="Input Button!">

<br><br>

<!-- Här använder jag en bild i en länk -->
<a href="#" onclick="incrementValue()">
<img id="image" src="https://cdn4.iconfinder.com/data/icons/brightmix/128/monotone..." width="42" height="42" border="0">
</a>

<br><br>

<!--Samma som ovan men använder mig av <map> om man vill klicka bara på circeln i bilden inte allt det vita tex. -->
<img id="image" src="https://cdn4.iconfinder.com/data/icons/brightmix/128/monotone..." usemap="#countMap"width="42" height="42" border="0">
<map name="countMap" onclick="incrementValue()">
<area shape="circle" coords="21,21,16" alt="exitImage" href="#">
</map>

</body>

Skickar värdet till "console log" den kan du ta fram genom "shift + i" finns en flik som heter console, i Google Chrome då. När du har den uppe klicka på knappar och bild länken så uppdateras Value med 1 enhet.

Lycka till!
CADS

Edit: Blev lite fel med mina kommentars taggar, fixat nu

Visa signatur

i7 10700K / EVGA 2070 / Z490-I / 16GB 3600mhz / 1.5TB NVMe / SF750 / Lian Li TU150 / Custom Loop / Ducky One 2

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

En notis om du kör med ID använd istället

Var value = $("#id).val();

Visa signatur

Arch - Makepkg, not war -||- Gigabyte X570 Aorus Master -||- GSkill 64GiB DDR4 14-14-15-35-1T 3600Mhz -||- AMD 5900x-||- Gigabyte RX6900XT -||- 2x Adata XPG sx8200 Pro 1TB -||- EVGA G2 750W -||- Corsair 570x -||- O2+ODAC-||- Sennheiser HD-650 -|| Boycott EA,2K,Activision,Ubisoft,WB,EGS
Arch Linux, one hell of a distribution.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Det heter "image", inte "img" när du definerar type.

<input type="image" src="xxx.jpg">

Visa signatur

Min Hemsida

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Redigera
Citera flera Citera
Permalänk
99:e percentilen ★
●
Skrivet av Commander:

En notis om du kör med ID använd istället

Var value = $("#id).val();

Gå till inlägget

Det fungerar bara med jQuery.

Visa signatur

Skrivet med hjälp av Better SweClockers

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av cads:

Tjena!

Jag skulle göra såhär istället:

<script>
var value = 0;
function incrementValue(){
value++;
console.log('Value: ' + value);
}
</script>
<body>
<!-- Bara en vanlig input knapp -->
<input type="button" onclick="incrementValue()" value="Input Button!">

<br><br>

<!-- Här använder jag en bild i en länk -->
<a href="#" onclick="incrementValue()">
<img id="image" src="https://cdn4.iconfinder.com/data/icons/brightmix/128/monotone..." width="42" height="42" border="0">
</a>

<br><br>

<!--Samma som ovan men använder mig av <map> om man vill klicka bara på circeln i bilden inte allt det vita tex. -->
<img id="image" src="https://cdn4.iconfinder.com/data/icons/brightmix/128/monotone..." usemap="#countMap"width="42" height="42" border="0">
<map name="countMap" onclick="incrementValue()">
<area shape="circle" coords="21,21,16" alt="exitImage" href="#">
</map>

</body>

Skickar värdet till "console log" den kan du ta fram genom "shift + i" finns en flik som heter console, i Google Chrome då. När du har den uppe klicka på knappar och bild länken så uppdateras Value med 1 enhet.

Lycka till!
CADS

Edit: Blev lite fel med mina kommentars taggar, fixat nu

Gå till inlägget

Chromes developer tools får man fram genom Ctrl + Shift + I

Skrivet av paxax:

Min kod som ökar värdet med 1 varje gång jag klickar.

<script>
function incrementValue()
{
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number').value = value;

}
</script>

Varje gång jag klickar på knappen så ökar värdet. Funkar jättebra.

<input type="button" onclick="incrementValue()" value="Increment Value"

Skulle ändra till att "Varje gång bilden klickas så ökar värdet"

<input type="img" src="xxx.jpg" onclick="incrementValue()" value="Increment Value"

Nu blev det helt knas. Sidan reloadar varje gång bilden klickas på och urlen får X och Y koordinater. /// .php?x=169&y=163

(värdet ökar med 1 när jag trycker på bilden men sidan reloadas...)

Tack på förhand.

Gå till inlägget

Den koden du har postat har inte den effekten du beskriver. Har du möjlighet att posta hela koden?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av yakideo:

Chromes developer tools får man fram genom Ctrl + Shift + I

Gå till inlägget

Opps!

Visa signatur

i7 10700K / EVGA 2070 / Z490-I / 16GB 3600mhz / 1.5TB NVMe / SF750 / Lian Li TU150 / Custom Loop / Ducky One 2

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Commander:

En notis om du kör med ID använd istället

Var value = $("#id).val();

Gå till inlägget

Gå och lägg dig.

Redigera
Citera flera Citera
Permalänk
Medlem
●

http://jsfiddle.net/yzM9C/

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara