Как раскрасить число из переменной Javascript, когда оно достигает определенного числа, в HTML-лаборатории Code.org? - PullRequest
Новая
       27

Как раскрасить число из переменной Javascript, когда оно достигает определенного числа, в HTML-лаборатории Code.org?

2 голосов
/ 02 апреля 2019

Я создаю веб-сайт с помощью веб-лаборатории Code.org, и у меня есть переменная внутри тегов, которую я хотел бы перекрасить, как только она достигнет 100. Какой код я должен использовать в HTML или Javascript-частяхстраницы, чтобы достичь этого?

Это новая концепция для меня, добавление Javascript в HTML, поэтому я посмотрел его в Google и Stack Overflow для ответов.В каждом результате говорилось либо о раскраске определенных слов в абзаце, либо о сохранении цветов в переменных javascript.

Вот Javascript на странице, который содержит указанную переменную: 

<script>
      function clickCounter() {
        if (typeof(Storage) !== "undefined") {
          if (localStorage.clickcount) {
            localStorage.clickcount = Number(localStorage.clickcount)+1;
          } else {
            localStorage.clickcount = 1;
          }
          document.getElementById("result").innerHTML = "People have attempted but failed to help me " + localStorage.clickcount + " times.";
        } else {
          document.getElementById("result").innerHTML = "Sorry, your browser does not support helping me.";
        }
      }
    </script>

И вотHTML-код, связанный с переменной щелчка: 

<p><button onclick="clickCounter()" type="button"><b>HELP ME</b></button></p>
    <div id="result"></div>

Сам код работает отлично, но я понятия не имею, как его раскрасить, когда он достигнет 100 щелчков.Если бы кто-нибудь мог мне помочь, это было бы оценено.

Ответы [ 2 ]

1 голос
/ 02 апреля 2019

Учитывая, что вы не добавили элемент, для которого вы хотите изменить цвет, я добавлю <p> здесь.

Вы можете изменить цвет текста элемента с помощью .style.color. Большинство стилей CSS можно изменить с помощью HTMLElement.style.

Стиль применяется к 1 элементу HTML и ко всему внутри этого конкретного элемента, поэтому, если вы примените цвет к <div id="result"></div>, цвет всей вещи изменится.

Чтобы исправить это, вы должны изменить HTML-код, чтобы можно было указать конкретную часть, которую вы хотите изменить. Здесь я завернул localStorage.clickcount с <span id="recolor"></span>.

Затем вы можете нацелиться на recolor и изменить его цвет, когда localStorage.clickcount >= 100. 

<script>
function clickCounter() {
  if (typeof(Storage) !== "undefined") {
    if (localStorage.clickcount) {
      localStorage.clickcount = Number(localStorage.clickcount)+1;
    } else {
      localStorage.clickcount = 1;
    }
    document.getElementById("result").innerHTML = "People have attempted but failed to help me <span id='recolor'>" + localStorage.clickcount + "</span> times.";

    if (localStorage.clickcount >= 100) {
      document.getElementById("recolor").style.color = "blue";
    }
  } else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support helping me.";
  }
}
</script>


<p><button onclick="clickCounter()" type="button"><b>HELP ME</b></button></p>
<div id="result"></div>
0 голосов
/ 02 апреля 2019

вы можете поддерживать глобальную переменную count в вашем коде JavaScript.Когда вы нажимаете на кнопку, увеличиваете ее на 1. Когда счет равен 100, измените цвет результата 

<script>
function clickCounter() {
    if (typeof(Storage) !== "undefined") {
    if (localStorage.clickcount) {
        localStorage.clickcount = Number(localStorage.clickcount)+1;
        if(localStorage.clickcount == 100){
           document.getElementById("result").style.color = "red";
           localStorage.clickcount = 0;
        }
    } else {
        localStorage.clickcount = 1;
    }
    document.getElementById("result").innerHTML = "People have attempted but failed to help me " + localStorage.clickcount + " times.";
    } else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support helping me.";
    }
}
</script>
...