用戶輸入值到變量爲文本

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() { 
 
\t 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 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() { 
 
\t 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 2

使用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() { 
 
    \t 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>

Answer 3

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() { 
 
\t 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 and Properties

Answer 4

<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() { 
 
\t var key = prompt('Enter something bro').toLowerCase(); 
 
    
 
    $('p').text(key); 
 

 
    }); 
 
}); 
 
    </script>

必須使用的document.ready函數來執行jQuery代碼..

Answer 5

使用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() { 
 
\t 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>

比較