CODEWITHSUNDEEP
javascripthtml
Ada
Ada

Reputation: 569

How do I get my button to return desired value

I am building a simple demo app that is to tell the user if two words in an input field are isormophic (same word length) or not on submission. I have written the logic out but I am not getting any value returned, I seem to have skipped something.

index.html

 <body>

    <header>
      <h1>
        Isomorphic Strings
      </h1>
      <p>
        Two strings are called isomorphic if their lengths are equal.
      </p>
    </header>

    <section>
      <div class="container">
        <h2 class>
          Please input the strings you want to compare
        </h2>
        <form>          
          <input type="text" placeholder="Input a word" id="string1" >          
          <input type="text" placeholder="Input another word" id="string2">
          <button type="submit" onclick=isIsoMorphic()>
            Check isormorphism
          </button>
        </form>
        <div id="information">
          <p><p>
        </div>
      </div>      
    </section>

    <footer>
      &copy; Simpcyclassy 2019
    </footer>

  </body>

index.js

const result = document.querySelector('#information');

const stringOne = document.querySelector('#string1');

const stringTwo = document.querySelector('#string2');

function isIsomorphic() {    
    str1 = stringOne.value.trim().length;
    str2 = stringTwo.value.trim().length;

    for (let i = 0; i < str1 i++) {

      if ([str1[i]] !== str2[i]) {
            result.style.color = 'red';
            result.innerHTML = 'Strings are not isomorphic'
            return false;
       } else if ([str1[i]] === str2[i]){
         return true;
         result.style.color = "green";
         result.innerHTML = 'Strings are isomorphic'         
       } else {
         return false;
         result.style.color = 'red';
         result.innerHTML = 'Please input missing field';        
       }
    }
}

Upvotes: 0

Views: 60

Answers (4)

Ramesh Pardhi
Ramesh Pardhi

Reputation: 11

@Ismail and @David784 are right.

HTML:

<header>
      <h1>
        Isomorphic Strings
      </h1>
      <p>
        Two strings are called isomorphic if their lengths are equal.
      </p>
    </header>

    <section>
      <div class="container">
        <h2 class>
          Please input the strings you want to compare
        </h2>
        <form action="" method="POST" onsubmit="return isIsomorphic()">          
          <input type="text" placeholder="Input a word" id="string1" name="string1">          
          <input type="text" placeholder="Input another word" id="string2" name="string2">
          <button type="submit" value="submit">
            Check isormorphism
          </button>
        </form>
        <div id="information">
          <p><p>
        </div>
      </div>      
    </section>

    <footer>
      &copy; Simpcyclassy 2019
    </footer>

JavaScript:

<script>
function isIsomorphic() {

    const result = document.querySelector('#information');

    const stringOne = document.querySelector('#string1').value.trim();

    const stringTwo = document.querySelector('#string2').value.trim();

    //Conver input text in array
    var stringOneArray = stringOne.split('');
    var stringTwoArray = stringTwo.split('');

    // Get the number of characters
    str1 = stringOne.length;
    str2 = stringTwo.length;

    // Check if the character length is equal
    if(str1 == str2){

        for (i = 0; i < str1; i++) {

            if (stringOneArray[i] !== stringTwoArray[i]) {

                    result.style.color = 'red';
                    result.innerHTML = 'Strings are not isomorphic';
                    return false;

            } else if (stringOneArray[i] === stringTwoArray[i]){ 

                result.style.color = "green";
                result.innerHTML = 'Strings are isomorphic'; 
                // return; stops the code and the code after is doesn't executes.
                return true;   

            } else {

                result.style.color = 'red';
                result.innerHTML = 'Please input missing field';
                // return; stops the code and the code after is doesn't executes. 
                return false;   

            }      

        }

    }

}
</script>

Upvotes: 1

David784
David784

Reputation: 7474

A few other things, in addition to @Ismail ashish's answer:

  • str1 and str2 are numbers. This array syntax doesn't make sense: str1[i].
  • I don't think you want these additional ad-hoc array brackets in your if statements: [str1[i]]
  • Since str1 and str2 are numbers, I don't think you don't really need a for loop.
  • in your else if and else you have code after a return...the return stops execution of the function, so those should be last.
  • forms have a default behavior which you probably don't want. To stop the form's default behavior, you will want to change your <button type="submit" onclick="isIsomorphic(event);"> so that you can get access to the event, and then add a preventDefault() for your event in your function.
  • Just a suggestion, but I'd prefer an onsubmit to onclick here. Most browsers allow you to "submit" a form by hitting enter in an input field, and onclick will miss this.

Putting it all together:

If you really just want to compare the string lengths, I think you can lose the for loop altogether and just do something like this:

function isIsomorphic(e) {
  e.preventDefault();
  str1 = stringOne.value.trim().length;
  str2 = stringTwo.value.trim().length;
console.log(str1, str2);
  if (str1 !== str2) {
    result.style.color = 'red';
    result.innerHTML = 'Strings are not isomorphic';
    return false;
  } else if (str1 === str2) {
    result.style.color = 'green';
    result.innerHTML = 'Strings are isomorphic';
    return true;
  } else {
    result.style.color = 'red';
    result.innerHTML = 'Please input missing field';
    return false;
  }
}

Upvotes: 1

Dev Man
Dev Man

Reputation: 2137

This modified code should work

const result = document.querySelector('#information');

const stringOne = document.querySelector('#string1');

const stringTwo = document.querySelector('#string2');

function isIsomorphic() {
  str1 = stringOne.value.trim().length;
  str2 = stringTwo.value.trim().length;
  var isIsomorphic = true;

  if (str1 > 0 && str2 > 0) {
    if (str1 !== str2) {
      result.style.color = 'red';
      result.innerHTML = 'Strings are not isomorphic'
      isIsomorphic = false;
    } else if (str1 === str2) {
      result.style.color = "green";
      result.innerHTML = 'Strings are isomorphic'
    }
  } else {
    result.style.color = "red";
    result.innerHTML = 'Fill in empty fields'
    isIsomorphic = false;
  }
  return isIsomorphic
}
<header>
  <h1>
    Isomorphic Strings
  </h1>
  <p>
    Two strings are called isomorphic if their lengths are equal.
  </p>
</header>

<section>
  <div class="container">
    <h2 class>
      Please input the strings you want to compare
    </h2>
    <form>
      <input type="text" placeholder="Input a word" id="string1">
      <input type="text" placeholder="Input another word" id="string2">
      <button type="button" onclick="isIsomorphic()">
            Check isormorphism
          </button>
    </form>
    <div id="information">
      <p>
        <p>
    </div>
  </div>
</section>

<footer>
  &copy; Simpcyclassy 2019
</footer>

Upvotes: 2

KIA
KIA

Reputation: 100

add onclick=isIsoMorphic() as an attribute to the button.There is no event listener called so it wouldnt know when you clicked the button.

Upvotes: 2

Related Questions