用户输入的值到变量到文本

Question

我想做的是，当用户输入一个与两个变量之一匹配的值时，我希望输入的值“触发”该变量。所以基本上，你在提示符中输入变量的名称，然后我想要一个段落标记来获取变量包含的文本。

但是我不能让它工作，因为输入的值变成了文本，根本不会触发变量。它只是转换成纯文本。

我希望我提供的代码片段能澄清我正在努力实现的其余目标！

​

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>

​

Answer 1

​

  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>

​

这是你的问题的一个简单解决方案。不是将选项存储为变量，而是将其存储为对象。您可以使用objects键获取选项的值。或者直接获取对象的属性。有关详细信息，请参阅Objects and Properties

Answer 2

使用全局窗口输出值

​

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>

​

Answer 3

使用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>

​