qjooo
unknown
html
3 years ago
5.9 kB
5
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- задача 1: да се създаде скрипт, чрез който при натискане върху бутон Промени се сменя изображение https://placehold.co/150x150 на http://placehold.co/?x?, където ? e стойността въведена в текстовото поле Размер. Изберете наименования на id-тата на текстовата кутия, изображението и бутонът --> <!-- задача 2: създайте скрипт, чрез който при натискане бутон Оцвети се премахва клас table-bordered от таблица и се променя цвета на текста в таблицата на червен --> <!-- задача 3: създайте скрипт, чрез който при натискане бутони от 1 до 5 се взима стойноста на натиснатия бутон и се натрупва (сумира с предишни стойности) в едноредово текстово поле --> <script> document.addEventListener('DOMContentLoaded', () => { // clean(document.body); const task1 = () =>{ let btn1a = document.querySelector('#button1a') btn1a.addEventListener('click', (e) => { let inp = document.querySelector('#input1a'); if(parseInt(inp.value)){ document.querySelector('#img1a').src = 'https://placehold.co/' + inp.value + 'x' + inp.value; } }); } const task2 = () =>{ let btn1 = document.querySelector('.btn-dark'); btn1.addEventListener('click', (e) => { let a = document.querySelector('.table-bordered'); let p = document.querySelectorAll('td'); a.classList.remove('table-bordered'); p.forEach( i => { i.style.color = 'red'; i.style.border = 'none'; }); }); } const task3 = () =>{ let links = document.querySelectorAll('.page-link'); links.forEach( item => { item.addEventListener('click', (e) =>{ let input = document.querySelector('#adress'); // let value = parseInt(input.value) ? parseInt(input.value); }); }) } task1(); task2(); taks3(); }); const clean = (node) => { for(var n = 0; n < node.childNodes.length; n ++) { var child = node.childNodes[n]; if ( child.nodeType === 8 || (child.nodeType === 3 && !/\S/.test(child.nodeValue)) ) { node.removeChild(child); n --; } else if(child.nodeType === 1) { clean(child); } } } </script> </style> </head> <body class="py-4"> <!-- задача 1 --> <div class="container" class="my-4 "> <form class="form-inline"> <div class="form-group"> <label for="size" class="col-lg-2 form-label">Размер</label> <div class="col-lg-10"> <input type="text" class="form-control" id="input1a" placeholder="размер"> </div> </div> <div class="form-group"> <label for="size" class="col-lg-2 control-label"> </label> <div class="col-lg-10 col-lg-offset-2"> <button type="button" class="btn btn-primary" id="button1a">Промени</button> </div> </div> <div> </div> </form> <div class="my-4"> <img src="http://placehold.co/150x150" id="img1a"/> </div> </div> <!-- задача 1 --> <!-- задача 2 --> <div class="container mt-3" > <table class="table table-bordered"> <tr> <td>11</td> <td>12</td> <td>13</td> </tr> <tr> <td>5</td> <td>25</td> <td>10</td> </tr> <tr> <td>8</td> <td>7</td> <td>6</td> </tr> </table> <button type="button" class="btn btn-dark">Оцвети</button> </div> <!-- задача 2 --> <!-- задача 3 --> <div class="container mt-5"> <div class="form-group"> <label for="paragraph">Страница</label> <input type="text" class="form-control" id="address"> </div> <ul class="pagination mt-2"> <li class="page-item"> <a class="page-link bg-info text-white" href="#">1</a> </li> <li class="page-item"> <a class="page-link bg-info text-white" href="#">2</a> </li> <li class="page-item"> <a class="page-link bg-info text-white" href="#">3</a> </li> <li class="page-item"> <a class="page-link bg-info text-white" href="#">4</a> </li> <li class="page-item"> <a class="page-link bg-info text-white" href="#">5</a> </li> </ul> </div> <!-- задача 3 --> </body> </html>
Editor is loading...