Onchange function with options to change textbox string not working

user_13939918 0
Viewed 364

Goal: Show a string that changes entered text from textbox based on a selected option. Problem: I am a beginner - unsure why the code is not functioning. See below.

<main class="color-design">
<form id="formSentence"
 <p>`enter code here`
   <label for="txtSentence">Enter a sentence</label>
   <input type="text" id="txtSentence">
 </p>

 <p>
  <select id="selSentenceChange" change="sentenceChange()">
   <option value="choose">Choose One</option>
   <option value="upperCase">Print in upper case</option>
   <option value="replacement">Replace first "e" with "X"</option>
   <option value="firstLetter">Print the first letter in the string</option>
  </select>
 </p>
</form>
<div id="results"</div>
<!-- end of results div -->
</main>

<script>
  function sentenceChange ()
  {

    var change = document.getElementById("selSentenceChange").value;
    var sentence = "txtSentence";

    if (change == "upper")
    {
    sentence = txtSentence.toUpperCase();
    }
    document.getElementById("results").innerHTML = sentence;
  }
html javascript
2 Answers

Few issue on your HTML and JS. I will add them below to highlight.

  1. Select change need to be call like this onchange
  2. You are NOT getting the value of your input you need to either use getElementById('txtSentence') or querySelector('#txtSentence')
  3. Also you not matching your option value which is uppercase NOT upper
  4. Also it's not ideal to use .innerHTML as its not recemended use .textContent which i have used as well to display results select option

All the options are working as expected.

  1. The first option will convert word to toUpperCase using toUpperCase
  2. Second option will replace first e from entered words with X using replace()
  3. Third option will get the first letter from the entered strings using chatAt()

This will store the results and display in the results div

var results

Demo: Run snippet to below see it working.

function sentenceChange() {

  var change = document.getElementById("selSentenceChange").value;
  var sentence = document.getElementById("txtSentence").value;
  var results;
  if (change === "upperCase") {
    results = sentence.toUpperCase();
  } else if (change === "replacement") {
    results = sentence.replace('e', 'X')
  } else if (change === "firstLetter") {
    results = sentence.charAt(0)
  }
  document.getElementById("results").innerHTML = results;
}
input {
  display: block;
}
<main class="color-design">
  <form id="formSentence">
    <p>
      <label for="txtSentence">Enter a sentence</label>
      <input type="text" id="txtSentence">
    </p>

    <p>
      <select id="selSentenceChange" onchange="sentenceChange()">
        <option value="choose">Choose One</option>
        <option value="upperCase">Print in upper case</option>
        <option value="replacement">Replace first "e" with "X"</option>
        <option value="firstLetter">Print the first letter in the string</option>
      </select>
    </p>
  </form>
  <div id="results"></div>
</main>

user_136690480 

var select = document.getElementById("selSentenceChange");

select.addEventListener("change", sentenceChange);

function sentenceChange(e) {
  var change = e.target.value;

  var sentence = document.getElementById("txtSentence").value;

  if (change == "upperCase") {
    sentence = sentence.toUpperCase();
  }
  document.getElementById("results").innerText = sentence;
}
<main class="color-design">
  <form id="formSentence"><p>
    <label for="txtSentence">Enter a sentence</label>
    <input type="text" id="txtSentence"/>
    </p>

    <p>
      <select id="selSentenceChange">
        <option value="choose">Choose One</option>
        <option value="upperCase">Print in upper case</option>
        <option value="replacement">Replace first "e" with "X"</option>
        <option value="firstLetter">Print the first letter in the string</option>
      </select>
    </p>
  </form>
  <div id="results"> </div>
    <!-- end of results div -->
</main>

user_65112150
Related