CODEWITHSUNDEEP
javascript
Error_404
Error_404

Reputation: 29

How to check if a <div> contains a determinate text?

I want to make an easteregg for my website. There's a title you can change. I want it to start the easteregg if it contains a determinate string.

<h1 class="titlename" id="changeT">Welcome</h1>

<div class="action1">
  <div id="titlechange">
    <p>
      <div id="explain">Write the title you want and press "Confirm". The title "Welcome" will be replaced with the text you wrote. <span class="material-icons">
          leaderboard
          </span></div>
    </p>
    <input type="text" id="myText" value="Your title" maxlength="50">

    <button onclick="chageText()" class="hideshowbtn">Confirm <span class="material-icons">
        check
        </span></button>

    <script>
      function chageText() {
        var x = document.getElementById("myText").value;
        document.getElementById("changeT").innerHTML = x;
      }
    </script>
  </div>
</div>

I want it to start a script if contains "hello". How?

Upvotes: 0

Views: 535

Answers (3)

Kamuran S&#246;necek
Kamuran S&#246;necek

Reputation: 3334

you can use includes method with innerText.

if(document.getElementById('example').innerText.includes('hello')){
  //... do somethings
}

https://jsfiddle.net/vn50dayk/

Upvotes: 0

Fred
Fred

Reputation: 397

You want to use "string".includes("keyword") to check if a string contains a certain substring.

Depending on whether you want to check for the easteregg-keyword when the user presses the button, or during input, I have written two ways for you to check the value of the input.

<h1 class="titlename" id="changeT">Welcome</h1>

<div class="action1">
  <div id="titlechange">
    <p>
      <div id="explain">Write the title you want and press "Confirm". The title "Welcome" will be replaced with the text you wrote. <span class="material-icons">
          leaderboard
          </span></div>
    </p>
    <!-- If you want to check for easteregg when user types, add onkeyup="checkInput()"-->
    <input type="text" id="myText" value="Your title" maxlength="50" onkeyup="checkInput()">

    <button onclick="chageText()" class="hideshowbtn">Confirm <span class="material-icons">
        check
        </span></button>

    <script>
      function chageText() {
        var input = document.getElementById("myText").value;
        var header = document.getElementById("changeT");
        header.innerHTML = input;

        var keyword = "button"
        // If you want to check input when user presses the button:
        if(input.includes(keyword)){
            // Do easteregg stuff
            header.style.color = "red";
        }
      }

      function checkInput() {
        var input = document.getElementById("myText").value;
        var header = document.getElementById("changeT");

        var keyword = "check";
        if(input.includes(keyword)){
          //Do easteregg stuff
          header.style.color = "blue";
        }
      }
    </script>
  </div>
</div>

Upvotes: 1

user14779090
user14779090

Reputation:

Try to do this if the string is a word:

      function chageText() {
        var x = document.getElementById("myText").value;
        if( x.split(" ").indexOf("hello") !== -1 ) document.getElementById("changeT").innerHTML = x;
      }
<h1 class="titlename" id="changeT">Welcome</h1>

<div class="action1">
  <div id="titlechange">
    <p>
      <div id="explain">Write the title you want and press "Confirm". The title "Welcome" will be replaced with the text you wrote. <span class="material-icons">
          leaderboard
          </span></div>
    </p>
    <input type="text" id="myText" value="Your title" maxlength="50">

    <button onclick="chageText()" class="hideshowbtn">Confirm <span class="material-icons">
        check
        </span></button>
  </div>
</div>

Upvotes: 0

Related Questions