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

Skicka en Javascriptfunktion till en div tag

1
Skriv svar
Permalänk
Medlem
●

Skicka en Javascriptfunktion till en div tag

Hur gör man för att få ett resultat ifrån en javascript funktion att visa sig i en div tag?

Funktionen ser ut så här

function getRandom() {
    return Math.floor((Math.random() * 100) + 1);
}

Vad skriver man mellan div taggaran för att få fram något resultat?

Visa signatur

CPU: AMD Ryzen 7 7800X3D
Ram: Kingston 32GB DDR5 6000MHz
GPU: AMD Radeon RX 9070 XT
Operativsystem: Windows 11

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

Hur gör man för att få ett resultat ifrån en javascript funktion att visa sig i en div tag?

Funktionen ser ut så här

function getRandom() {
    return Math.floor((Math.random() * 100) + 1);
}

Vad skriver man mellan div taggaran för att få fram något resultat?

Gå till inlägget

Du kan använda innerHTML för att sätta innehållet i en tag till något.

js-funktionen här:
var rnd = Math.floor((Math.random() * 100) + 1);
document.getElementById('minDiv').innerHTML=rnd;

och i html-koden:
<div id="minDiv"></div>
Redigera
Citera flera Citera
Permalänk
Medlem
●
document.getElementById("IdPåDinDiv").innerHTML="DinData";

Edit: ninja'd

Visa signatur

How to program

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

Du kan använda innerHTML för att sätta innehållet i en tag till något.

js-funktionen här:
var rnd = Math.floor((Math.random() * 100) + 1);
document.getElementById('minDiv').innerHTML=rnd;

och i html-koden:
<div id="minDiv"></div>
Gå till inlägget

Jag har missat något just nu så ser min kod ut såhär, i min javascriptfil finns

function getRandom() {
    var rnd = Math.floor((Math.random() * 100) + 1);
    document.getElementById('code').innerHTML = rnd;
}

Min HTML fil innehåller

<script src="JavaScript.js" type="text/javascript"></script>

Och en div tag som inte vissar något random nummer

<div id="code"></div>
Visa signatur

CPU: AMD Ryzen 7 7800X3D
Ram: Kingston 32GB DDR5 6000MHz
GPU: AMD Radeon RX 9070 XT
Operativsystem: Windows 11

Redigera
Citera flera Citera
Permalänk
Medlem
●

Kallar du på funktionen någon gång då? typ "<button onclick="getRandom()">Random</button>" ?

Visa signatur

CPU: Intel i5 2500K @ 4,7GHz Mobo: Asus P8Z68-V
GPU: Asus STRIX 970 RAM: 8GB Corsair Vengence 1600 MHz CL9
PSU: OCZ ModXStream 700W Chassi: NZXT Phantom

Citera så att jag hittar tillbaka!

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

Kallar du på funktionen någon gång då? typ "<button onclick="getRandom()">Random</button>" ?

Gå till inlägget

Tack då funkar det men kan man inte bara få upp ett nummer så fort sidan laddas?

Visa signatur

CPU: AMD Ryzen 7 7800X3D
Ram: Kingston 32GB DDR5 6000MHz
GPU: AMD Radeon RX 9070 XT
Operativsystem: Windows 11

Redigera
Citera flera Citera
Permalänk
Hedersmedlem ★
●
Skrivet av PeterMagnuss0n:

Tack då funkar det men kan man inte bara få upp ett nummer så fort sidan laddas?

Gå till inlägget

Miniexempel för att illustrera:

<!doctype html> 
<meta charset="utf-8"> 

<div id="minDiv"></div> 

<script> 
var minDiv = document.getElementById('minDiv');

function getRandom() { 
  return Math.floor((Math.random() * 100) + 1); 
} 

minDiv.textContent = getRandom();
</script>

Funktionen kallas alltså på sista raden. Genom att du kör detta anrop efter att dokumentet "byggts upp" så är det inga problem att anropa elementet, och det sker alltså direkt när sidan laddas.

Visa signatur

Nu med kortare användarnamn, men fortfarande bedövande långa inlägg.

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

Kallar du på funktionen någon gång då? typ "<button onclick="getRandom()">Random</button>" ?

Gå till inlägget

För att ingen ska få för sig något:

Använd inte onclick och liknande attribut. Gör man så blandar man innehåll (HTML) och beteende (JavaScript) i en stor soppa och koden blir svår att förstå och underhålla. Man bör istället göra någonting i den här stilen:

<input id="bar" type="button" value="Click here">
function doSomething() {
   alert("Hello world!");
}

var myButton = document.getElementById("bar");

myButton.addEventListener("click", doSomething);
Visa signatur

Skrivet med hjälp av Better SweClockers

Redigera
Citera flera Citera
Permalänk
Medlem
●

Om du vill att den ska få ett nummer direkt när sidan laddan måste du lyssna på load eventet.

function getRandom() {
  return Math.floor(Math.random() * 100 + 1);
}

window.addEventListener("load", function() {
  var div = document.getElementById("ditt_id"),
       rnd = getRandom();

  div.innerHTML = rnd;
}, false);
Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av HurMycket:

För att ingen ska få för sig något:

Använd inte onclick och liknande attribut. Gör man så blandar man innehåll (HTML) och beteende (JavaScript) i en stor soppa och koden blir svår att förstå och underhålla. Man bör istället göra någonting i den här stilen:

<input id="bar" type="button" value="Click here">
function doSomething() {
   alert("Hello world!");
}

var myButton = document.getElementById("bar");

myButton.addEventListener("click", doSomething);
Gå till inlägget

Jag håller med om att det är bra att separera beteende och innehåll i så stor utsträckning som möjligt, men du får tänka på att OP inte ens vet hur man kallar på en funktion.
I det här fallet tror jag att det är bättre om man gör en enklare, mer lättförståelig lösning. Många nybörjarguider som OP kommer att stöta på kommer att använda DOM-event, och så länge det är enligt HTML-standarden så förstår jag inte varför du försöker måla ut det som värre än pesten.

Visa signatur

CPU: Intel i5 2500K @ 4,7GHz Mobo: Asus P8Z68-V
GPU: Asus STRIX 970 RAM: 8GB Corsair Vengence 1600 MHz CL9
PSU: OCZ ModXStream 700W Chassi: NZXT Phantom

Citera så att jag hittar tillbaka!

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

Jag håller med om att det är bra att separera beteende och innehåll i så stor utsträckning som möjligt, men du får tänka på att OP inte ens vet hur man kallar på en funktion.

Gå till inlägget

Jag försöker därför visa det i mitt exempel.

Citat:

I det här fallet tror jag att det är bättre om man gör en enklare, mer lättförståelig lösning. Många nybörjarguider som OP kommer att stöta på kommer att använda DOM-event, och så länge det är enligt HTML-standarden så förstår jag inte varför du försöker måla ut det som värre än pesten.

Nej, jag håller inte med. Jag tycker inte att man ska visa hur man inte ska göra, bara för att man anser det "lättare". Det måste vara mycket bättre att se till att nybörjare lär sig rätt från början.

Bara för att något följer HTML-standarden är det inte OK. SweClockers hemsida är tyvärr ett skräckexempel med tabeller i tabeller i divar i divar i divar i divar; knappt ett enda ID (där det ska vara det) utan bara klasser överallt; samt massa återkommande inline styles, som exempel. (Antar att det beror på vBulletin, så lastar inte SweClockers för det, men det är så det är.)

Vad tycker du till exempel om följande kodsnutt, som är ett enda strippat foruminlägg?

<div class="center">
	<div class="page">
		<div>
			<div id="edit12345678" style="padding:0px 9px 6px 9px">
				<!-- this is not the last post shown on the page -->
				<table class="forum_post  " cellpadding="6" cellspacing="0" border="0" width="100%" align="center">
					<tbody>
						<tr>
							<td class="thead" width="175"></td>
						</tr>
						<tr valign="top">
							<td class="forum_post_profile alt2" width="175"></td>
							<td class="forum_post_main alt1" id="td_post_12345678">
								<div id="post_message_12345678" class="forum_post_body text"></div>
								<div class="forum_post_signature"></div>
							</td>
						</tr>
						<tr>
							<td class="forum_post_status alt2"></td>
							<td class="forum_post_control alt1" align="right"></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>
Dold text
Visa signatur

Skrivet med hjälp av Better SweClockers

Redigera
Citera flera Citera
Permalänk
Hedersmedlem ★
●
Skrivet av HurMycket:

[…] knappt ett enda ID (där det ska vara det) utan bara klasser överallt […]

Gå till inlägget

Jag är inte den som försvarar Vbulletin , men vad gäller avsaknad av ID-attribut så är det en generell och vanligt använd teknik att enbart, utan undantag, använda klasser till CSS-ändamål. I stället för att flika ut för mycket i denna tråd så länkar jag till diskussioner som redan varit, på bloggar och annat:

ID har mening vad gäller att kunna adressera ett specifikt element via exempelvis JavaScript eller som länkankare, men konceptet med "unikt element" bär egentligen ingen mening när det gäller CSS. Däremot så har det nackdelen att det ökar komplexiteten i prioritetsbestämmandet i CSS, vilket kan leda till en ordentlig djungel av `!important` och annat i större projekt, vilket genererar gråa utvecklarhår.

Utan att ta ställning för att detta skulle vara "rätt" (och det stack en del i mina ögon första gången jag såg det själv ) så är det väl starkt att säga att det är "fel" att inte använda ID-attribut överallt där man måhända kan.

Visa signatur

Nu med kortare användarnamn, men fortfarande bedövande långa inlägg.

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

Jag är inte den som försvarar Vbulletin , men vad gäller avsaknad av ID-attribut så är det en generell och vanligt använd teknik att enbart, utan undantag, använda klasser till CSS-ändamål. I stället för att flika ut för mycket i denna tråd så länkar jag till diskussioner som redan varit, på bloggar och annat:

ID har mening vad gäller att kunna adressera ett specifikt element via exempelvis Javascript

Gå till inlägget

Just precis. Det är ett återkommande irritationsmoment för mig under utvecklingen av mitt userscript för SweClockers. Det blir en massa .getElementsByClassName("page")[0] som bara känns helt fel.

Citat:

eller som länkankare, men konceptet med "unikt element" bär egentligen ingen mening när det gäller CSS. Däremot så har det nackdelen att det ökar komplexiteten i prioritetsbestämmandet i CSS, vilket kan leda till en ordentlig djungel av `!important` och annat i större projekt, vilket genererar gråa utvecklarhår.

Utan att ta ställning för att detta skulle vara "rätt" (och det stack en del i mina ögon första gången jag såg det själv ) så är det väl starkt att säga att det är "fel" att inte använda ID-attribut överallt där man måhända kan.

Jag tycker bara det känns ultrafel att ha en <div class="page"> eller <div class="main"> (för dessa element på SweClockers hemsida). Det låter som att det finns eller kan finnas flera sådana på sidan. Nej, jag föredrar den semantiska tydlighet man får med ID. Plus att det som sagt blir mycket trevligare när man skriver JavaScript.

Visa signatur

Skrivet med hjälp av Better SweClockers

Redigera
Citera flera Citera
Permalänk
Avstängd
●

Jag är shockad att ingen har tipsat om att använda ett vettigt MV* ramverk istället för hålla på och manipulera Domen själv.

Kolla på Angular eller Knockout,

I knockout, http://jsfiddle.net/Jg3HF/

Visa signatur

Min blogg

Redigera
Citera flera Citera
1
Skriv svar