API tools faq
paste
Advertisement
fcamuso

Javascript Lezione 60

fcamuso
Jul 30th, 2022
1,215
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 4.47 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html lang="en">
  3.   <head>
  4.     <title>Title</title>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.     <style>
  8.       img {width: 50px; height: 50px;}
  9.       td, #img1 {border: 1px solid black;}
  10.       .testoRosso {color: red;}
  11.       .sfondoGiallo {background-color: yellow;}
  12.       .font35 {font-size: 35px;}
  13.       .font25 {font-size: 25px;}
  14.       span {font-size: 25px;}
  15.  
  16.       p {margin: 5px; background-color: lightgray;}
  17.       .grigioScuro {background-color: darkgray; font-weight: bold; }
  18.  
  19.       .nascondi {position: relative; left: -1000px;}
  20.       .giusta {border: 2px dashed green; max-width: 50px;}
  21.       .rispostaData {background-color: lightgray;}
  22.       .bloccoIniziato {border: 3px solid red;}
  23.   </style>
  24.    </head>
  25.   <body>
  26.  
  27.     <div id='div2'>
  28.         <a href="https://www.bbc.com">sito bbc</a>
  29.     </div>
  30.  
  31.     Londra <input class="c1" type="checkbox" name="capitali" id="cb1">
  32.     Parigi <input class="c1" type="checkbox" name="capitali" id="cb2">
  33.     Roma   <input type="checkbox" name="capitali" id="cb3">
  34.     Madrid <input type="checkbox" name="capitali" id="cb4"> <br> <br>
  35.  
  36.     Luogo nascita <input type="text" id="localita"> <br> <br>
  37.     Lingua madre <input type="text" id="lingua">
  38.     <br>
  39.     <br>
  40.  
  41.     <select id="elenco1">
  42.         <option id="op1">1</option>
  43.         <option id="op2">2</option>
  44.         <option id="op3">3</option>
  45.     </select>
  46.  
  47.     <br><br>
  48.  
  49.     <select id="elenco2">
  50.         <option id="opA">A</option>
  51.         <option id="opB">B</option>
  52.         <option id="opC">C</option>
  53.     </select>
  54.    
  55.     <p id="parent">esempio <span id='test'>testo nello span</span> io termino il paragrafo</p>
  56.    
  57.     <div id='div1'>  
  58.              
  59.       <p id="p1" class="testoRosso sfondoGiallo">primo paragrafo</p>
  60.       <p id="p2">secondo paragrafo
  61.                  <img id="img1" src="teatro1.png">
  62.                  <img id="img2" src="teatro2.png">
  63.                  <a href="#">link <span id='sp' style="color: red;"> disabilitato </span></a>
  64.       </p>
  65.  
  66.       <div class="bloccoDomande" id="interno">
  67.         <p>DOMANDE</p>
  68.  
  69.         Clicca sulla risposta giusta:
  70.         <ul id="lista">
  71.           <li>A</li>
  72.           <li>B</li>
  73.           <li id="giusta">C</li>
  74.           <li>D</li>
  75.           <li>E</li>
  76.         </ul>
  77.  
  78.         Clicca sulla risposta giusta:
  79.         <ul id="lista2">
  80.           <li>A</li>
  81.           <li>B</li>
  82.           <li id="giusta">C</li>
  83.           <li>D</li>
  84.           <li>E</li>
  85.         </ul>
  86.        
  87.         Clicca sulla risposta giusta:
  88.         <ul id="lista3">
  89.           <li>A</li>
  90.           <li>B</li>
  91.           <li id="giusta">C</li>
  92.           <li>D</li>
  93.           <li>E</li>
  94.         </ul>        
  95.  
  96.       </div>
  97.     </div>
  98.     <br><br>
  99.  
  100.     <script>
  101.  
  102.       // const padre = document.getElementById('div1');
  103.       // const figli = padre.querySelectorAll('p');
  104.       // const figli_p_array = Array.from(figli);
  105.       // figli_p_array.forEach( (ele) => ele.style.backgroundColor='pink');
  106.  
  107.       //con una sola istruzione
  108.       // Array.from(document.getElementById('div1')
  109.       //   .querySelectorAll('p'))
  110.       //   .forEach( (ele) => ele.style.backgroundColor='pink');
  111.  
  112.       //sfondo rosa a TUTTI i figli (anche se non sono paragrafi)
  113.       // Array.from(document.getElementById('div1').children)
  114.       //   .forEach( (ele) => ele.style.backgroundColor='pink');
  115.  
  116.       //sfondo rosa ai figli solo se sono paragrafi
  117.       Array.from(document.getElementById('div1').children)
  118.         .forEach( (ele) =>
  119.           { console.log(ele.nodeName);
  120.             if (ele.nodeName==='P') ele.style.backgroundColor='pink';});
  121.      
  122.       Array.from(document.getElementById('lista').children)
  123.          .forEach( (ele) => ele.style.fontWeight='bold');
  124.  
  125.       document.getElementById('giusta')
  126.         .addEventListener('click', function() {
  127.          
  128.           //sposto prima del bordo sinistro i fratelli adiacenti
  129.           this.nextElementSibling.classList.add('nascondi');
  130.           this.previousElementSibling.classList.add('nascondi');
  131.  
  132.           this.classList.add('giusta');
  133.          
  134.           //assegno uno sfondo al genitore diretto
  135.           this.parentElement.classList.add('rispostaData');
  136.  
  137.           //assegno un bordo al blocco delle domande
  138.           this.closest('div.bloccoDomande').classList.add('bloccoIniziato');
  139.  
  140.         });        
  141.      
  142.     </script>
  143.   </body>
  144. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!