{"id":595,"date":"2026-10-19T11:59:15","date_gmt":"2026-10-19T11:59:15","guid":{"rendered":"https:\/\/mihkelunt.eu\/wp\/?page_id=595"},"modified":"2026-10-19T12:01:24","modified_gmt":"2026-10-19T12:01:24","slug":"js-kusimustik","status":"publish","type":"page","link":"https:\/\/mihkelunt.eu\/wp\/veebirakendused\/js-kusimustik\/","title":{"rendered":"JS K\u00fcsimustik"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/* Lehe \u00fcldine kujundus *\/\nbody {\n    background-color: #fff4e6;\n    color: #5c4033;\n    font-family: Arial, sans-serif;\n    margin: 0;\n    padding: 30px;\n}\n\n\/* Pealkiri *\/\nh1 {\n    background-color: #f4b183;\n    color: #5c4033;\n    text-align: center;\n    padding: 25px;\n    border-radius: 12px;\n}\n\n\/* K\u00fcsimustiku tabel *\/\ntable {\n    width: 90%;\n    max-width: 1000px;\n    margin: 30px auto;\n    background-color: #ffe5d0;\n    border-radius: 12px;\n    padding: 20px;\n    border-spacing: 12px;\n}\n\n\/* Tabeli lahtrid *\/\ntd {\n    padding: 12px;\n    vertical-align: top;\n}\n\n\/* Vormiv\u00e4ljad *\/\ninput[type=\"text\"],\ninput[type=\"number\"],\ninput[type=\"url\"],\ninput[type=\"date\"],\nselect,\ntextarea {\n    padding: 10px;\n    border: 2px solid #e6ad89;\n    border-radius: 8px;\n    background-color: #fffaf4;\n    color: #5c4033;\n    max-width: 100%;\n    box-sizing: border-box;\n}\n\n\/* Nupud *\/\ninput[type=\"submit\"],\ninput[type=\"reset\"],\ninput[type=\"button\"] {\n    background-color: #c96b4b;\n    color: white;\n    padding: 12px 22px;\n    border: none;\n    border-radius: 8px;\n    cursor: pointer;\n    transition: 0.3s;\n}\n\n\/* Hiirega nupule liikudes *\/\ninput[type=\"submit\"]:hover,\ninput[type=\"reset\"]:hover,\ninput[type=\"button\"]:hover {\n    background-color: #a94f35;\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\nfunction nimiLugemineKastist(){\n    let vastus1=document.getElementById(\"vastus1\");\n    let nimi=document.getElementById(\"nimi\");\n\n    vastus1.innerHTML=\"Sisestatud nimi on: \"+nimi.value;\n    vastus1.style.background=\"lightgreen\";\n\n    return nimi.value;\n}\n\n\/\/raadio valikud\nfunction raadiovalik(){\n\n}\n\n\/\/checkboxvalik\nfunction checkboxvalik(){\n    let vastus3=document.getElementById(\"vastus3\");\n    let Oasis=document.getElementById(\"Oasis\");\n    let Radiohead=document.getElementById(\"Radiohead\");\n    let RHCP=document.getElementById(\"RHCP\");\n    let AC=document.getElementById(\"AC-DC\");\n\n    let valik2=\"\";\n    if(Oasis.checked){\n        valik2+=Oasis.value + ', <br>';\n    }\n    if(Radiohead.checked){\n        valik2+=Radiohead.value + ', <br>';\n    }\n    if(RHCP.checked){\n        valik2+=RHCP.value + ', <br>';\n\n    }\n    if(AC.checked){\n        valik2+=AC.value + ', <br>';\n    }\n\n    vastus3.innerHTML=\"Sinu lemmikud on : \"+valik2;\n    vastus3.style.background=\"lightgreen\";\n    return valik2;\n}\n\/\/range\nfunction rangeValik(){\n    let vastus4=document.getElementById(\"vastus4\");\n    let tund=document.getElementById(\"tund\");\n\n    vastus4.innerHTML=\"Sa kuulad muusikat: \"+tund.value + \" tundi\";\n\n    return tund.value\n}\n\n\/\/select Valik\nfunction selectValik(){\n    let vastus5=document.getElementById(\"vastus5\");\n    let stiil=document.getElementById(\"stiil\");\n    \/\/ 0 on esimene rida loetelus\n    if(stiil.selectedIndex!==0){\n        vastus5.innerHTML=\"Sa valisid \" + stiil.value;\n\n    }\n    else{\n        vastus5.innerHTML=\"palun tee oma valik\";\n    }\n    return stiil.value;\n}\n\/\/kasutab teisi funktsioone\n\nfunction naitaKoike(){\n    let vastusKoik=document.getElementById(\"vastusKoik\");\n    let nimi=nimiLugemineKastist();\n    let valik=radiovalik();\n    let valik2=checkboxvalik();\n    let tund=rangeValik();\n    let stiil=selectValik();\n    let valik3=raadioValik2();\n    let raadiojaaam=raadiojaamvalik()\n\n    vastusKoik.innerHTML=\"Sinu nimi on \" +nimi+'<br>' +\n        'Sinu lemmikud on : ' + valik2+ '<br>'+\n        'Sa kastuad '+valik +'<br>' +\n        'Sa kuulad muusikat '+tund+' tundi<br>'+\n        'Sa valisid '+stiil+'<br>'+\n        'Sinu arvamus on : '+arvamus+'<br>'+\n        valik3+'<br>'+\n        raadiojaaam+'<br>' ;\n\n\n}\nfunction puhasta(){\n    vastus1.innerHTML=\"\";\n    vastus2.innerHTML=\"\";\n    vastus3.innerHTML=\"\";\n    vastus4.innerHTML=\"\";\n    vastus5.innerHTML=\"\";\n    vastus6.innerHTML=\"\";\n    vastus7.innerHTML=\"\";\n    vastusKoik.innerHTML=\"\";\n}\n\n\nfunction arvamusLugeminde(){\n    let vastus6=document.getElementById(\"vastus6\");\n    let arvamus=document.getElementById(\"arvamus\");\n\n    vastus6.innerHTML=\"Teie arvamus on: \" +arvamus.value;\n    vastus6.style.background=\"lightgreen\";\n    return arvamus.value;\n\n}\nfunction raadioValik2(){\n    let vastus7=document.getElementById(\"vastus7\");\n    let Jah = document.getElementById(\"Jah\");\n    let Ei = document.getElementById(\"Ei\");\n\n\n\n    let valik3=\"\";\n    if(Jah.checked){\n        valik3=Jah.value;\n    }\n    else if (Ei.checked){\n        valik3=Ei.value;\n    }\n    else {\n        valik3=\"Tee oma valik\";\n    }\n\n    \/\/vastus\n    vastus7.innerHTML=\"Valik on: \"+valik3;\n\n    return valik3;\n}\nfunction raadiojaamvalik(){\n    let vastus8=document.getElementById(\"vastus8\");\n    let raadiojaam=document.getElementById(\"raadiojaam\");\n\n    vastus8.innerHTML=\"raadiojaam: \"+raadiojaam.value;\n    return raadiojaam.value;\n}\n<\/script>\n\n<h1>Muusika k\u00fcsimustik<\/h1>\n<div>HTML vormid ja nupud<\/div>\n<form action=\"#\">\n    <!-- c + tab komentaar -->\n    <table>\n        <tbody><tr>\n            <td>\n                <!-- Tekstkast -->\n                <label for=\"nimi\">Nimi: <\/label>\n            <\/td>\n            <td>\n                <input type=\"text\" id=\"nimi\" placeholder=\"Mihkel\" oninput=\"nimiLugemineKastist()\">\n            <\/td>\n            <td>\n                <div id=\"vastus1\"><\/div>\n            <\/td>\n        <\/tr>\n        <tr>\n            <td>\n                <!-- ripploend v\u00f5i rippmen\u00fc\u00fc -->\n\n                <label for=\"stiil\">Vali meeldivaim muusikastiil<\/label>\n            <\/td>\n            <td>\n                <select name=\"stiil\" id=\"stiil\" onchange=\"selectValik()\">\n                    <option value=\"vali\">vali&#8230;<\/option>\n                    <option value=\"hiphop\">hiphop<\/option>\n                    <option value=\"kantri\">kantri<\/option>\n                    <option value=\"rock\">rock<\/option>\n                    <option value=\"metal\">metal<\/option>\n                    <option value=\"jazz\">jazz<\/option>\n                <\/select>\n            <\/td>\n            <td>\n                <div id=\"vastus5\"><\/div>\n            <\/td>\n        <\/tr>\n        <tr>\n            <td>\n                <!-- radio nupud -\u00fcks valik mitmest -->\n                Kuidas sa muusikat peamiselt kuulad?\n            <\/td>\n            <td>\n                <input type=\"radio\" name=\"platvorm\" id=\"spotify\" value=\"spotify\" data-pilt=\"..\/..\/Kusimustik\/Spotify.png\" onclick=\"radioValikud()\">\n                <label for=\"spotify\">Spotify<\/label>\n                <br>\n                <input type=\"radio\" name=\"platvorm\" id=\"soundcloud\" value=\"soundcloud\" data-pilt=\"..\/..\/Kusimustik\/soundcloud.png\" onclick=\"radioValikud()\">\n                <label for=\"soundcloud\">Soundcloud<\/label>\n                <br>\n                <input type=\"radio\" name=\"platvorm\" id=\"youtube\" value=\"youtube\" data-pilt=\"..\/..\/Kusimustik\/youtube.png\" onclick=\"radioValikud()\">\n                <label for=\"youtube\">YouTube<\/label>\n                <br>\n                <input type=\"radio\" name=\"platvorm\" id=\"raadio\" value=\"raadio\" data-pilt=\"https:\/\/www.oomipood.ee\/image\/catalog\/IMG34614182769.png\" onclick=\"radioValikud()\">\n                <label for=\"raadio\">Raadio<\/label>\n                <br>\n                <img decoding=\"async\" src=\"\" alt=\"\" id=\"valitudPilt\">\n            <\/td>\n            <td>\n                <div id=\"vastus2\"><\/div>\n            <\/td>\n        <\/tr>\n        <tr>\n            <td colspan=\"2\">\n                <!-- checkbox -->\n                <fieldset>\n                    <legend>Tee oma valikud &#8211; lemmik ansambel<\/legend>\n                    <input type=\"checkbox\" name=\"lemmikud\" id=\"radiohead\" value=\"radiohead\" onchange=\"checkBoxValik()\">\n                    <label for=\"radiohead\">Radiohead<\/label>\n                    <br>\n                    <input type=\"checkbox\" name=\"lemmikud\" id=\"the-smashing-pumpkins\" value=\"the-smashing-pumpkins\" onchange=\"checkBoxValik()\">\n                    <label for=\"the-smashing-pumpkins\">The Smashing Pumpkins<\/label>\n                    <br>\n                    <input type=\"checkbox\" name=\"lemmikud\" id=\"the-smiths\" value=\"the-smiths\" onchange=\"checkBoxValik()\">\n                    <label for=\"the-smiths\">The Smiths<\/label>\n                    <br>\n                    <input type=\"checkbox\" name=\"lemmikud\" id=\"have-a-nice-life\" value=\"have-a-nice-life\" onchange=\"checkBoxValik()\">\n                    <label for=\"have-a-nice-life\">Have A Nice Life<\/label>\n                    <br>\n                    <input type=\"checkbox\" name=\"lemmikud\" id=\"slowdive\" value=\"slowdive\" onchange=\"checkBoxValik()\">\n                    <label for=\"slowdive\">Slowdive<\/label>\n                    <br>\n                    <input type=\"checkbox\" name=\"lemmikud\" id=\"muse\" value=\"muse\" onchange=\"checkBoxValik()\">\n                    <label for=\"muse\">Muse<\/label>\n                    <br>\n                <\/fieldset>\n            <\/td>\n            <td>\n                <div id=\"vastus3\"><\/div>\n            <\/td>\n        <\/tr>\n        <tr>\n            <td>\n                <!-- range - vahemik -->\n                <label for=\"tund\">\n                    Mitu tundi p\u00e4evas sa kuulad muusikat\n                <\/label>\n            <\/td>\n            <td>\n                0<input type=\"range\" id=\"tund\" min=\"0\" max=\"24\" value=\"12\" onchange=\"rangeValik()\">24\n            <\/td>\n            <td>\n                <div id=\"vastus4\"><\/div>\n            <\/td>\n        <\/tr>\n        <tr>\n            <td>\n                <label for=\"arvamus\">Mida arvad muusika kuulamisest koolis?<\/label>\n            <\/td>\n            <td>\n                <textarea name=\"arvamus\" id=\"arvamus\" cols=\"30\" rows=\"10\" oninput=\"arvamusLugemine()\"><\/textarea>\n            <\/td>\n            <td>\n                <div id=\"vastus6\"><\/div>\n            <\/td>\n        <\/tr>\n        <tr>\n            <td>\n                <label>Kas sa kuulad raadiot?<\/label>\n            <\/td>\n            <td>\n                <input type=\"radio\" name=\"radiovalik\" id=\"jah\" value=\"jah\" onclick=\"radiovalik1()\">\n                <label for=\"jah\">Jah<\/label>\n                <input type=\"radio\" name=\"radiovalik\" id=\"ei\" value=\"ei\" onclick=\"radiovalik1()\">\n                <label for=\"ei\">Ei<\/label>\n            <\/td>\n            <td>\n                <div id=\"vastus7\"><\/div>\n            <\/td>\n        <\/tr>\n        <tr>\n            <td>\n                <label for=\"raadiojaam\">Milliseid raadiojaamu oskad nimetada?<\/label>\n            <\/td>\n            <td>\n                <input type=\"text\" name=\"raadiojaam\" id=\"raadiojaam\" placeholder=\"sky raadio\" oninput=\"raadiojaama()\">\n            <\/td>\n            <td>\n                <div id=\"vastus8\"><\/div>\n            <\/td>\n        <\/tr>\n        <tr>\n            <td>\n                <label for=\"data\">Mis p\u00e4ev t\u00e4na on<\/label>\n            <\/td>\n            <td><input type=\"date\" id=\"data\" name=\"data\"><\/td>\n        <\/tr>\n        <tr>\n            <td>\n                <label for=\"myfile\">Vali a file (muusikainstrument):<\/label>\n            <\/td>\n            <td>\n                <input type=\"file\" id=\"myfile\" name=\"myfile\">\n            <\/td>\n        <\/tr>\n        <tr>\n            <td>\n                <label for=\"homepage\">Lisa URl sinu lemmik laul:<\/label>\n            <\/td>\n            <td>\n                <input type=\"url\" id=\"homepage\" name=\"homepage\">\n            <\/td>\n        <\/tr>\n        <tr>\n            <td><label for=\"quantity\">Kui sageli sa muusikat kuulad? (1 kuni 5):<\/label><\/td>\n            <td>  <input type=\"number\" id=\"quantity\" name=\"quantity\" min=\"1\" max=\"5\"><\/td>\n        <\/tr>\n        <tr>\n            <td><label for=\"favcolor\">Millist v\u00e4rvi seostad oma lemmikb\u00e4ndiga?:<\/label><\/td>\n            <td><input type=\"color\" id=\"favcolor\" name=\"favcolor\"><\/td>\n        <\/tr>\n        <tr>\n            <td>\n                saada vorm\n            <\/td>\n            <td><input type=\"submit\" value=\"Submit\"><\/td>\n        <\/tr>\n        <tr>\n            <td>\n                <input type=\"reset\" value=\"Puhasta\" onclick=\"puhasta()\">\n            <\/td>\n\n            <td>\n                <input type=\"button\" value=\"N\u00e4ita\/loe andmed\" onclick=\"naitaKoike()\">\n            <\/td>\n            <td>\n                <div id=\"vastusKoik\"><\/div>\n            <\/td>\n        <\/tr>\n    <\/tbody><\/table>\n\n<\/form>\n","protected":false},"excerpt":{"rendered":"<p>Muusika k\u00fcsimustik HTML vormid ja nupud Nimi: Vali meeldivaim muusikastiil vali&#8230;hiphopkantrirockmetaljazz Kuidas sa muusikat peamiselt kuulad? Spotify Soundcloud YouTube Raadio Tee oma valikud &#8211; lemmik ansambel Radiohead The Smashing Pumpkins The Smiths Have A Nice Life Slowdive Muse Mitu tundi p\u00e4evas sa kuulad muusikat 024 Mida arvad muusika kuulamisest koolis? Kas sa kuulad raadiot? Jah [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":582,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-595","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mihkelunt.eu\/wp\/wp-json\/wp\/v2\/pages\/595","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mihkelunt.eu\/wp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mihkelunt.eu\/wp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mihkelunt.eu\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mihkelunt.eu\/wp\/wp-json\/wp\/v2\/comments?post=595"}],"version-history":[{"count":1,"href":"https:\/\/mihkelunt.eu\/wp\/wp-json\/wp\/v2\/pages\/595\/revisions"}],"predecessor-version":[{"id":596,"href":"https:\/\/mihkelunt.eu\/wp\/wp-json\/wp\/v2\/pages\/595\/revisions\/596"}],"up":[{"embeddable":true,"href":"https:\/\/mihkelunt.eu\/wp\/wp-json\/wp\/v2\/pages\/582"}],"wp:attachment":[{"href":"https:\/\/mihkelunt.eu\/wp\/wp-json\/wp\/v2\/media?parent=595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}