CODEWITHSUNDEEP
javascriptjquery
Unkn0wn
Unkn0wn

Reputation: 70

user entered value to variable to text

What I'm trying to do, when the user enters a value that matches one of the two variables I want the entered value then to 'trigger' the variable. So basically, you enter the name of the variable in a prompt then I want a paragraph tag to get the text that the variable holds.

However I can't get it to work, since the entered value becomes the text and does not trigger the variable at all. It just converts into plain text.

I hope the snippet I provided clears up the rest of what I'm trying to achieve!

var help = 'Put me in the paragraph tag please!'
  var no = 'Or me, either way it\'s fine!'


  $('.reset').on('click', function() {
    $('p').text('');
  });

  $('.go').on('click', function() {
	var key = prompt('Enter something bro').toLowerCase();
    
    $('p').text(key);


  });
button {
  transition:color .3s;
  border:none;
  font-size:18px;
  color:white;
  padding:1%;
  width:100px;
  cursor:pointer;
}

button:hover {
  color:rgba(0,0,0,.7)
}

.go {
  background-color:#4CAF50;
}

.reset {
  background-color:#f44336;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="reset">Reset</button>

<button class="go">Go</button>

<p>Replace me</p>

Upvotes: 0

Views: 55

Answers (5)

Rafiqul Islam
Rafiqul Islam

Reputation: 1646

Use window[key] to use enter text into compare with variable

var help = 'Put me in the paragraph tag please!'
  var no = 'Or me, either way it\'s fine!'


  $('.reset').on('click', function() {
    $('p').text('');
  });

  $('.go').on('click', function() {
	var key = prompt('Enter something bro').toLowerCase();
    var name = window[key];
    $('p').text(name);


  });
button {
  transition:color .3s;
  border:none;
  font-size:18px;
  color:white;
  padding:1%;
  width:100px;
  cursor:pointer;
}

button:hover {
  color:rgba(0,0,0,.7)
}

.go {
  background-color:#4CAF50;
}

.reset {
  background-color:#f44336;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="reset">Reset</button>

<button class="go">Go</button>

<p>Replace me</p>

Upvotes: 0

Nagaraj Pujar
Nagaraj Pujar

Reputation: 530

<script>
$(document).ready(function(){
var help = 'Put me in the paragraph tag please!'
  var no = 'Or me, either way it\'s fine!'

  $('.reset').on('click', function() {
  
    $('p').text('');
  });

  $('.go').on('click', function() {
	var key = prompt('Enter something bro').toLowerCase();
   
    $('p').text(key);

  });
});
  </script>

you must use document.ready function to execute jquery code..

Upvotes: 0

Manish
Manish

Reputation: 5066

  var decision={
    help : 'Put me in the paragraph tag please!',
    no : 'Or me, either way it\'s fine!'
  }


  $('.reset').on('click', function() {
    $('p').text('');
  });

  $('.go').on('click', function() {
	var key = prompt('Enter something bro').toLowerCase();
    
    $('p').text(decision[key]);


  });
button {
  transition:color .3s;
  border:none;
  font-size:18px;
  color:white;
  padding:1%;
  width:100px;
  cursor:pointer;
}

button:hover {
  color:rgba(0,0,0,.7)
}

.go {
  background-color:#4CAF50;
}

.reset {
  background-color:#f44336;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="reset">Reset</button>

<button class="go">Go</button>

<p>Replace me</p>

Here is a simple solution for your problem. Store your options not as variables but as an object. The you can get the value of the option using the objects key. Or Directly getting the property of the object. For Details refer Objects and Properties

Upvotes: 2

Harikrishnan N
Harikrishnan N

Reputation: 874

Use window[key]

    var help = 'Put me in the paragraph tag please!'
      var no = 'Or me, either way it\'s fine!'


      $('.reset').on('click', function() {
        $('p').text('');
      });

      $('.go').on('click', function() {
    	var key = prompt('Enter something bro').toLowerCase();
    if(window[key] != undefined )
                alert(window[key]);
            $('p').text(window[key]);
      });
    button {
      transition:color .3s;
      border:none;
      font-size:18px;
      color:white;
      padding:1%;
      width:100px;
      cursor:pointer;
    }

    button:hover {
      color:rgba(0,0,0,.7)
    }

    .go {
      background-color:#4CAF50;
    }

    .reset {
      background-color:#f44336;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <button class="reset">Reset</button>

    <button class="go">Go</button>

    <p>Replace me</p>

Upvotes: 0

madalinivascu
madalinivascu

Reputation: 32354

use the window global to output the value

var help = 'Put me in the paragraph tag please!'
  var no = 'Or me, either way it\'s fine!'


  $('.reset').on('click', function() {
    $('p').text('');
  });

  $('.go').on('click', function() {
	var key = prompt('Enter something bro').toLowerCase();
    
    $('p').text(window[key]);


  });
button {
  transition:color .3s;
  border:none;
  font-size:18px;
  color:white;
  padding:1%;
  width:100px;
  cursor:pointer;
}

button:hover {
  color:rgba(0,0,0,.7)
}

.go {
  background-color:#4CAF50;
}

.reset {
  background-color:#f44336;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="reset">Reset</button>

<button class="go">Go</button>

<p>Replace me</p>

Upvotes: 0

Related Questions