JavaScript ieraksti HTML elementos

JavaScript ir programmēšanas valoda, kas tiek izmantota, lai radītu dinamiku un interaktivitāti tīmekļa lapās. Tā var izmantot, lai mainītu HTML elementu saturu un izskatu dinamiski, tādējādi padarot tīmekļa lapu vēl interaktīvāku. Piemērs par to, kā izmantot JavaScript, lai ierakstītu HTML elementā, ir šāds:

<p id="demo">Šis ir paragrāfs.</p>

<script>
document.getElementById("demo").innerHTML = "Sveiks JavaScript!";
</script>

Šajā piemērā tiek izmantota “document.getElementById” funkcija, lai atrastu HTML elementu ar “demo” ID un mainītu tā saturu uz “Sveiks JavaScript!”. Tādējādi teksts “Šis ir paragrāfs.” tiks aizvietots ar “Sveiks JavaScript!” dinamiski, tiklīdz lapa tiks ielādēta pārlūkā.

JavaScript var izmantot, lai ierakstītu HTML elementā izmantojot funkciju. Piemērs par to, kā to izdarīt, ir šāds:

<p id="demo">Šis ir paragrāfs.</p>

<script>
function myfunc() {
document.getElementById("demo").innerHTML = "Sveiks JavaScript!";
}
myfunc();
</script>

Šajā piemērā tiek izveidota funkcija “myfunc”, kas izmanto “document.getElementById” funkciju, lai atrastu HTML elementu ar “demo” ID un mainītu tā saturu uz “Sveiks JavaScript!”. Pēc tam funkcija tiek izsaukta ar “myfunc();” un tās darbības tiek izpildītas, tādējādi mainot HTML elementa saturu uz “Sveiks JavaScript!”.

Tā var izmantot, lai dinamiski mainītu HTML elementu krāsas, piemēram, uzspiežot uz pogas vai veicot citu darbību. Piemērs par to, kā izmantot JavaScript, lai mainītu HTML elementa krāsu, ir šāds:

<button onclick="myFunction()">Nopied mani!</button>

<p id="demo">Šis ir paragrāfs.</p>

<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>

Šajā piemērā tiek izveidota funkcija “myFunction”, kas izmanto “document.getElementById” funkciju, lai atrastu HTML elementu ar “demo” ID un mainītu tā krāsu uz “sarkanu”. Pēc tam šī funkcija tiek izsaukta ar “onclick” atribūtu pogai, tādējādi padarot to interaktīvu. Uzspiežot uz pogas, funkcija tiks izpildīta un teksts “This is a paragraph.” tiks parādīts sarkanā krāsā.

JavaScript var izmantot, lai dinamiski mainītu attēla izskatu, izmantojot “document.getElementById” funkciju. Piemērs par to, kā to izdarīt, ir šāds:

<img id="mansAttēls" src="manaBilde.jpg" width="100" height="100">

<button onclick="myFunction()">Mainīt</button>

<script>
function myFunction() {
var img = document.getElementById("mansAttēls");
img.src = "tavsAttēls.jpg";
img.width = "200";
img.height = "200";
}
</script>

Šajā piemērā tiek izveidota funkcija “myFunction”, kas izmanto “document.getElementById” funkciju, lai atrastu attēlu ar “myImage” ID. Pēc tam tiek mainīts attēla “src” (attēla atrašanās vieta), “width” un “height” atribūti, lai mainītu attēla izskatu. Pēc tam šī funkcija tiek izsaukta ar “onclick” atribūtu pogai, tādējādi padarot to interaktīvu. Uzspiežot uz pogas, funkcija tiks izpildīta un attēls tiks mainīts uz jauno attēlu ar izmēriem “200×200”.

Šeit savukārt daži piemēri par to, kā Tu vari izmantot document.getElementById darbībās ar mūzikas failiem:

Izmanto, lai atskaņotu mūzikas failu:

<audio id="music" src="music.mp3"></audio>
const audioElement = document.getElementById('music');
audioElement.play();

Izmainīt atrašanās vietu mūzikas failam:

const audioElement = document.getElementById('music');
audioElement.src = 'new-music.mp3';

#ff0000;”>ATCERIES, ka document.getElementById Tu varēsi izmantot tikai tad, ja HTML dokumentā būs definēts tāds ID uz kuru Tu plāno atsaukties ar JavaScript kodu.