Daftar dan Belajar Sekarang!

Ubah style teks menggunakan tombol onclick pada javascript

foto debastian
3 Kontribusi 0 Coto
1 minggu yang lalu
tolong bantuannya cara bikin kaya digambar gimana ya,codenya,bingung sudah buatnya,mohon bantuannya utk tugas kampusgambar

Tag: javascript html

✔ Forum ini sudah terjawab


Jawaban
foto rubichandrap
19 Kontribusi 17 Coto
1 minggu yang lalu
HTML:
<span>Text</span><input id="content" type="text">
<span>Color</span><select>
    <option value="red">Merah</option>
    <option value="green">Hijau</option>
    <option value="blue">Biru</option>
</select>
<span>Size</span><select>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>
<input id="cetak" type="button" value="Cetak">

<div id="app"></div>
Javascript:
const app = document.querySelector('#app') // ini container teksnya nanti
const text = document.querySelector('#content')
const selects = Array.from(document.querySelectorAll('select'))
let styles = {
    color: '',
    fontSize: ''
}
const cetak = document.querySelector('#cetak') // tombol cetak

window.addEventListener('load', () => {
     styles.color = selects[0].value
     styles.fontSize = selects[1].value + "rem"
})

selects.forEach(select => {
    select.addEventListener('change', () => {
        styles.color = selects[0].value
        styles.fontSize = selects[1].value + "rem"
    })
})

cetak.addEventListener('click', () => {
    app.style.color = styles.color
    app.style.fontSize = styles.fontSize
    app.innerHTML = text.value
})
tested: https://codepen.io/rubichandrap/pen/Vwvqadz?editors=1111
answered icon
foto rubichandrap
19 Kontribusi 17 Coto
1 minggu yang lalu
HTML:
<span>Text</span><input id="content" type="text">
<span>Color</span><select>
    <option value="red">Merah</option>
    <option value="green">Hijau</option>
    <option value="blue">Biru</option>
</select>
<span>Size</span><select>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>
<input id="cetak" type="button" value="Cetak">

<div id="app"></div>
Javascript:
const app = document.querySelector('#app') // ini container teksnya nanti
const text = document.querySelector('#content')
const selects = Array.from(document.querySelectorAll('select'))
let styles = {
    color: '',
    fontSize: ''
}
const cetak = document.querySelector('#cetak') // tombol cetak

window.addEventListener('load', () => {
     styles.color = selects[0].value
     styles.fontSize = selects[1].value + "rem"
})

selects.forEach(select => {
    select.addEventListener('change', () => {
        styles.color = selects[0].value
        styles.fontSize = selects[1].value + "rem"
    })
})

cetak.addEventListener('click', () => {
    app.style.color = styles.color
    app.style.fontSize = styles.fontSize
    app.innerHTML = text.value
})
tested: https://codepen.io/rubichandrap/pen/Vwvqadz?editors=1111
  • Thanks bg,sdh saya coba,tpi masih belum bisa keluar text nya setelah diketik disitu,misalnya kan kalo saya ketik "saya sedang diluar" pilihan warna merah, trus font size 4, harusnya berubah sesuai formatnya,tapi thanks udh dibantuin bang - debastian
  • ga bsa dimananya bro? di gw bisa kok, nih https://codepen.io/rubichandrap/pen/Vwvqadz?editors=1111 - rubichandrap

foto debastian
3 Kontribusi 0 Coto
1 minggu yang lalu
oke udah bisa bang thanks banget bang

foto debastian
3 Kontribusi 0 Coto
1 minggu yang lalu
terimakasih banyak


Login untuk diksusi di forum sekolah koding