изменение цвета фона при нажатии на кнопку - PullRequest
Новая
       0

изменение цвета фона при нажатии на кнопку

0 голосов
/ 30 мая 2018

Я изучаю javascript!

Что мне нужно сделать, это изменить цвет фона одновременно с изменением изображения, нажав на кнопку.

Изменениекартинка, от включенного до выключенного, работает нормально, единственная проблема в том, что цвет фона моей HTML-страницы не меняется. 

  function colorize() {
            var element = document.getElementById("azul");
            element.style.backgroundColor = 'blue';
            element.style.color = "yellow";
        }
    html{
         background:
             grey;
     }
     #azul:focus {
         background: blue;
        
     }
    <div id="branca">
        <h1>LOI Lampen aanzetten en uitzetten</h1>
        <button id="azul" onclick="document.getElementById('myImage').src = '/img/393533_02.PNG'">Turn on the light</button>
        

        <img id="myImage" src="img/393533_01.PNG" class="mudar">
        <div id="yellow">
            <button onclick="document.getElementById('myImage', '').src='/img/393533_01.PNG'">Turn off the light</button>
        </div>
    </div>

Ответы [ 4 ]

0 голосов
/ 30 мая 2018

Вот ваш код: 

<style>
    body {
        background: grey;
    }
</style>

<script>
        function colorize(light) {
            if (light) {
                document.getElementById('myImage').src = '/img/393533_02.PNG';
                document.body.style.background = 'grey';
            }
            else {
                document.getElementById('myImage').src = '/img/393533_01.PNG'
                document.body.style.background = 'blue';
            }
        }
    </script>

<body>
    <div id="branca">
        <h1>LOI Lampen aanzetten en uitzetten</h1>
        <button id="azul" onclick="colorize(true)">Turn on the light</button>
        <img id="myImage" src="img/393533_01.PNG" class="mudar"/>
        <div id="yellow">
            <button onclick="colorize(false)">Turn off the light</button>
        </div>
    </div>
</body>

Теперь в функции colorize вы можете записать столько параметров, сколько вы хотите для двух разных условий.

0 голосов
/ 30 мая 2018

Это ваше решение, тоже вызовите функцию colorize 

<html>

<script>
function colorize() {
  var element = document.getElementsByTagName("html")[0];
  element.style.backgroundColor = 'blue';
  element.style.color = "yellow";
}
</script>

<style>
html{
background:
   grey;
}
#azul:focus {
background: blue;

}
</style>
<div id="branca">
<h1>LOI Lampen aanzetten en uitzetten</h1>
<button id="azul" onclick="document.getElementById('myImage').src = '/img/393533_02.PNG';colorize()">Turn on the light</button>


<img id="myImage" src="img/393533_01.PNG" class="mudar">
<div id="yellow">
  <button onclick="document.getElementById('myImage', '').src='/img/393533_01.PNG'">Turn off the light</button>
</div>
</div>

</html>
0 голосов
/ 30 мая 2018

Вам нужно изменить цвет фона document, а не element, который является вашей кнопкой.

Поскольку вы новичок в JavaScript, давайте избавимся от некоторых вредных привычек, которые вы 'мы уже подобраны.

Не настраивать обработчики событий через атрибуты событий HTML (т. е. onclick, onmouseover и т. д.).Это техника старше 25 лет, которую мы использовали до того, как у нас появились современные стандарты и лучшие практики, и, поскольку она проста в использовании, люди продолжают ее использовать.Но существует множество причин, по которым вам не следует использовать эту технику и вместо этого отделить ваш JavaScript от вашего HTML.Вместо этого держите JavaScript отдельно и используйте .addEventListener(), чтобы подключить ваши элементы к соответствующим функциям обратного вызова.

По возможности, работать с готовыми классами CSSпотому что ими легче управлять и использовать повторно, чем встроенными стилями CSS (через свойство .style).Затем вы можете легко использовать API element.classList для добавления или удаления классов по мере необходимости.

См. Комментарии ниже: 

// Get references to the elements you'll need to work with
let targetImage = document.getElementById('myImage');
let btnOn = document.getElementById("on");
let btnOff = document.getElementById("off");

// Then, set up your event handlers in JavaScript, not HTML
btnOn.addEventListener("click", changeImage);
btnOff.addEventListener("click", changeImage);

function changeImage(){
  // Set the target's source to the data-source attribute for the clicked button 
  targetImage.src = this.dataset.source; 
  targetImage.alt = this.dataset.alt // Now update the alt attribute
  
  // Change the background color of the page by adding or removing a
  // pre-made class to/from the body based on the button that was clicked
  
  // Since this is a simple if/then scenario, we can use the JavaScript "ternary" operator
  // which works like this:   some condition ? what to do if condition is true : what to do if false
  this.id === "on" ? document.body.classList.add("blue") : document.body.classList.remove("blue"); 
}
body { background-color: grey; } /* Style the body, not the HTML */ 
#on:focus { background: blue; color:yellow; }
.blue { background-color:aliceblue; } /* This will be added when on is clicked */


/* Just for this example only */
img { width:100px; }
<button id="on" data-source='https://cdn.wccftech.com/wp-content/uploads/2015/04/bulb_PNG1250.png' data-alt="On Image">Turn on the light</button>
<button id="off" data-source='https://www.radioducoeur.com/liten/radioducoeur/light-bulb-png-home-design-ideas-4-lightbulb-498-x-498-liten.jpg' data-alt="Off Image">Turn off the light</button>

<div>
  <!-- <img> elements must have an alt attribute to be valid -->
  <img id="myImage" src="https://www.radioducoeur.com/liten/radioducoeur/light-bulb-png-home-design-ideas-4-lightbulb-498-x-498-liten.jpg" class="mudar" alt="default image">
</div>
0 голосов
/ 30 мая 2018

Вы хотите изменить фон html так, что вам нужно сделать ... 

function colorize() {
     var element = document.getElementsByTagName("html")[0];
     element.style.backgroundColor = 'blue';
}

Вы брали элемент кнопки и меняли его цвет.Вы должны выбрать HTML-тег, поскольку вы хотите изменить свойство background-clor, назначенное ему через css.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...