paragraphBackgroundColor.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Paragraph Background Color</title>
</head>
<body>
  <div id="wrapper">
    <div id="radioButtons">
      <input type="radio" value="1" name="paraCount">1
      <input type="radio" value="4" name="paraCount">4
      <input type="radio" value="5" name="paraCount">5
      <input type="radio" value="10" name="paraCount">10
    </div>

    <div class="para">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur natus neque asperiores amet? Accusamus repellat optio nisi error inventore perspiciatis? Aspernatur commodi deleniti voluptates debitis. Beatae odio cumque iste ducimus!</p>
      <p>Enim repudiandae veniam ducimus nobis vero eaque deserunt, labore accusamus, temporibus est quod sapiente voluptatum perspiciatis? Distinctio eligendi suscipit optio nemo, porro vero! Quam vero natus, similique consequuntur facilis ab?</p>
      <p>Accusamus dicta iure officiis inventore repudiandae eligendi illo mollitia? Tempora corporis assumenda reprehenderit soluta molestiae, quidem laboriosam, animi iusto at architecto, veniam ut doloribus a error minus. Perspiciatis, ea! Animi?</p>
      <p>Repellendus et labore voluptatum fugiat! Hic, illum animi impedit corrupti asperiores quos ad! Necessitatibus, possimus? Repudiandae ipsam, minima praesentium assumenda natus et nam dolorem sapiente eum, molestias aperiam voluptatum ipsum?</p>
      <p>Impedit, nam. Facilis culpa iste veniam voluptatem nesciunt reprehenderit consequatur, rerum consequuntur. Repudiandae atque consectetur quaerat repellat deserunt maxime totam, alias labore commodi incidunt, necessitatibus ratione amet accusantium porro magni?</p>
      <p>Iusto sunt magnam nisi modi sed illo! Quo, beatae sed recusandae nostrum amet sapiente odit suscipit reiciendis unde ut facere sequi laudantium eum vero possimus delectus repellat nisi. Tempora, itaque?</p>
      <p>Hic amet deserunt dolore itaque similique ratione dicta, repellat dignissimos quibusdam neque a alias distinctio voluptates, est magnam animi consequuntur et quod. Ad vitae maiores officiis quis earum iste voluptate.</p>
      <p>Animi qui in dolorem incidunt nesciunt ducimus. Aliquam omnis laborum quo aspernatur facilis iste, vel nihil libero voluptates alias mollitia? Libero qui dolorum labore, earum est blanditiis nobis excepturi voluptatum!</p>
      <p>Adipisci voluptates ipsa aperiam illo labore distinctio illum laudantium natus et, laboriosam amet facilis? Ut, nostrum debitis. Corrupti, deserunt? Illo odio iste, eveniet ipsam quisquam officiis autem quidem delectus dicta!</p>
      <p>Tempore laboriosam blanditiis tempora possimus est! Illum sit laudantium dignissimos necessitatibus hic distinctio voluptatibus a harum odio illo repellendus, debitis, eligendi omnis quidem, perferendis tempora? Velit animi voluptatem minus illo.</p>
    </div>
  </div>
  <script>
    let radioButtons = document.querySelectorAll("input")
    let paragraphs = document.querySelectorAll("p")

    for(let i=0;i<radioButtons.length;i++){
      radioButtons[i].onclick = () => {
        let buttonvalue = radioButtons[i].value

        for(let j=0;j<paragraphs.length;j++){
          paragraphs[j].style.backgroundColor = "white"
        }

        for(let j=0;j<buttonvalue;j++){
          paragraphs[j].style.backgroundColor = "red"
        }
      }
    }

    

  </script>
</body>
</html>