Advertisement
gospod1978

DOM Manipulation/Visited Sites

Jan 2nd, 2020
406
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <link rel="stylesheet" href="template.css">
  6.     <script src="solution.js"></script>
  7.     <title>Visited Websites</title>
  8. </head>
  9.  
  10. <body>
  11.  
  12. <div class="wrapper tabled">
  13.     <div class="stage" id="page1">
  14.         <div class="middled">
  15.             <div class="link-1">
  16.                 <a href="#">
  17.                     <span class="thin">Soft</span><span class="thick">Uni</span>
  18.                 </a>
  19.                 <p>visited 1 times</p>
  20.             </div>
  21.             <div class="link-1">
  22.                 <a href="#">
  23.                     <span class="thin"></span><span class="thick">Google</span>
  24.                 </a>
  25.                 <p>visited 2 times</p>
  26.             </div>
  27.             <div class="link-1">
  28.                 <a href="#">
  29.                     <span class="thin">You</span><span class="thick">Tube</span>
  30.                 </a>
  31.                 <p>visited 4 times</p>
  32.             </div>
  33.             <div class="link-1">
  34.                 <a href="#">
  35.                     <span class="thick">Wiki</span><span class="thin">pedia</span>
  36.                 </a>
  37.                 <p>visited 4 times</p>
  38.             </div>
  39.  
  40.             <div class="link-1">
  41.                 <a href="#">
  42.                     <span class="thick">G</span><span class="thin">mail</span>
  43.                 </a>
  44.                 <p>visited 7 times</p>
  45.             </div>
  46.  
  47.             <div class="link-1">
  48.                 <a href="#">
  49.                     <span class="thick">stack</span><span class="thin">overflow</span>
  50.                 </a>
  51.                 <p>visited 6 times</p>
  52.             </div>
  53.         </div>
  54.     </div>
  55. <script>
  56.     function solve() {
  57.  
  58.         let divs = document.getElementsByTagName("a");
  59.  
  60.         Array.from(divs).forEach(e => {
  61.  
  62.         e.addEventListener('click', hendler);
  63.  
  64.     })
  65.  
  66.         function hendler(e) {
  67.             let target = e.currentTarget;
  68.             let newDiv = target.parentNode;
  69.             let newArt = newDiv.children[1];
  70.             let text = newArt.innerText.toString();
  71.             let number = text.match(/\d+/)[0];
  72.             text = text.replace(number, (+number + 1).toString());
  73.             newArt.innerHTML = text;
  74.  
  75.         }
  76.  
  77. }
  78. </script>
  79. </div>
  80. </body>
  81.  
  82. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement