JavaScript function output doesn't display on textarea

jugar
December 31, 2023
200 views
0 votes
2 Answers

Please help, I cant make to display the output to text area of the function attached to the button when clicked. Below code I have buttons called "GENERATE" and "PREVIEW". The "GENERATE" button is expected to display the combined value of the selected dropdowns, input text into the first text area [Incident Description] however it won’t. I was able to make the function to works if i just have the "GENERATE" function in a HTML/JavaScript code but if i include the function/module of "PREVIEW" it wont work. PREVIEW function output for now is fine.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!----======== CSS ========--> 
    <link rel="stylesheet" href="style.css">
     
    <!----===== Iconscout CSS ===== -->
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">

</head>
<body>
    <div class = "main"></div>
    <div class="container">
        <header>Service Affecting Incident Notification</header>
        <form id ="form" >
                <div class="Incident Generator">
                    <span class="title">Service Affecting Incident</span>
                    <div class="fields">
                        <div class="input-field">
                            <label>Incident Status </label>
                            <select id="incstatus">
                                <option value="Open">Open</option>
                                <option value="Closed">Closed</option>
                            </select>
                      </div>
                      <div class="input-field">
                        <label>Incident Priority </label>
                        <select id="incpriority">
                            <option value="Low">Low</option>
                            <option value="Medium">Medium</option>
                            <option value="High">High</option>
                        </select>
                     </div>
                        <div class="input-field">
                            <label>Business Impact </label>
                            <select id="bizimpact">
                                <option value="Partial">Partial</option>
                                <option value="Full">Full</option>
                              </select>
                        </div>
                        <div class="input-field">
                            <label>Reported By </label>
                            <select id="reportedby">
                                <option value="Operator 1">Operator 1</option>
                                <option value="OPerator 2">OPerator 2</option>
                              </select>
                        </div>
                      
                        <div class="input-field">
                            <label>Incident Description</label>
                            <input type="text" id="insshortdesc" cols="100" placeholder="Enter Incident Description" >
                        </div>

                        <div class="input-field">
                            <label>Affected Features </label>
                            <select id="features">
                                <option value="Login">Login</option>
                                <option value="Signup">Signup</option>
                              </select>
                        </div>
                        <div class="input-field">
                            <label>Impacted Devices/App </label>
                            <select id="devices">
                                <option value="iOS">iOS/iPAD OS</option>
                                <option value="Android">Android Device</option>
                              </select>
                        </div>
                        <div class="input-field">
                            <label> Incident Description</label>
                            <textarea type="text" id="resultTextarea" rows="10" cols="100"></textarea>
                        </div>
                        <div><span id = "result"></span></div>

                        <span class="title">Incident Updates Goes Here</span>
                        <div class="input-field">
                             <textarea type="text" id="updateTextarea" rows="5" cols="100"></textarea>
                        </div>



                        <div>
                            </div><div>
                       
      
                      </div>   </br>  
                      <div>
                         <button id="upButton"  onclick="updateTextarea()">Generate</button>
                         <button>Incident Update</button>
                         <button id="subbutton" onclick="displaySummary()">Preview</button>
                      </div>
            </form>
            
    </div>
</div>
            
         
    </div>
  <div class="botcontainer"></class>
    <div><span id="incSummary"></span><br> 
    <div><span id="incDescription"></span><br> 
    <div><span id="biznotes"></span><br>    



<script>


window.onload=function(){
          document.getElementById('subbutton','upButton').addEventListener('click', function(ev){
              ev.preventDefault(); // prevent the page submit
              });
         }


        function displaySummary() {
          
            var incstatus = document.getElementById('incstatus').value;
            var incpriority = document.getElementById('incpriority').value;
            var bizimpact = document.getElementById('bizimpact').value;
            var reportedby = document.getElementById('reportedby').value;
            var insshortdesc = document.getElementById('insshortdesc').value;
            var features = document.getElementById('features').value;
            var devices = document.getElementById('devices').value;
          
            var resultTextarea = document.getElementById('resultTextarea').value;

       
              
            var incSummary = 'Service Affecting Incident Notification:n';
            incSummary += 'Incident Status          : ' + incstatus + 'n';
            incSummary += 'Incident Priority        :' + incpriority + 'n';
            incSummary += 'Business Impact          :' + bizimpact + 'n';
            incSummary += 'Reported By              :' + reportedby + 'n';
            document.getElementById('incSummary').innerText = incSummary;

            var incDescription = 'n';
            incDescription += 'Incident Short Description             :' + insshortdesc + 'n';
            incDescription += 'Affected Features             :' + features + 'n';
            incDescription += 'Impacted Devices/Apps             :' + devices + 'n';
            incDescription += 'Impacted Service         :' + checkboxesValues.join(', ') + 'n';
            document.getElementById('incDescription').innerText = incDescription;
         

            var biznotes = 'Incident Descriptionn';
            biznotes += '' + resultTextarea + 'n';
            document.getElementById('biznotes').innerText =  biznotes;

        }


        function updateTextarea() {
            //Get the selected values from both dropdowns
            const bizimpactValue = document.getElementById('bizimpact').value;
            const featuresValue = document.getElementById('features').value;

         
            // Update the textarea dynamically based on the selected values
          document.getElementById('resultTextarea').value = getUpdatedMessage(bizimpactValue, featuresValue);
      
         
        }

          function getUpdatedMessage(bizimpactValue, featuresValue) {
            // Return the updated message dynamically based on the selected values
   
            if (bizimpactValue === 'Full') {
                return "Please note we are observing full system outage impacting " +
                    "the " + featuresValue + " functionality. " ;
            } else if (bizimpactValue === 'Partial') {
                return "We are observing intermittent outage impacting the " +
                    featuresValue + " functionality. " ;
            }
            return '';
        }


    </script>


</body>
</html>

GENERATE function module works as expected when in seperate html/javascript program

Tags: forms javascript

Answers

- AndyRay
- December 30, 2023 at 7:08 pm
- 0 votes
0
There are a few issues with your code.

First, your button click is submitting the form, causing a full page reload, so you’ll never see the output of your Javascript. That’s because this is invalid Javascript:
```
window.onload = function() {
  document.getElementById('subbutton','upButton').addEventListener('click', function(ev){
    ev.preventDefault(); // prevent the page submit
  });
}
```
getElementById() does not take multiple arguments, and you can’t add an event listener to multiple elements at the same time. If you want to do it this way, one option is to do it one at a time:
```
window.onload = function() {
  document.getElementById('subbutton').addEventListener('click', function(ev){
    ev.preventDefault();
  });
  document.getElementById('upButton').addEventListener('click', function(ev){
    ev.preventDefault();
  });
}
```
Secondly, using onclick is bad practice. You’re writing Javascript in a string, and you should never write code in strings. The actual issue here is a terrible one related to onclick and the DOM. You have an element with id="updateTextarea", which automatically creates the global variable updateTextarea and sets it to the textbox. This is part of the DOM specification. Your <button onclick="updateTextarea()"> is actually using updateTextarea pointing to the textbox, and trying to call the textbox reference like a function, which it can’t do.

You already use addEventListener so there’s no need for onclick anyway. This solves both problems:
```
window.onload = function() {
  document.getElementById('subbutton').addEventListener('click', (ev) => {
    ev.preventDefault();
    updateTextarea();
  });
  document.getElementById('upButton').addEventListener('click', (ev) => {
    ev.preventDefault();
    displaySummary();
  });
}
```
Your code has other issues which you can debug yourself by using the Chrome inspector and reading Javascript errors.
Login or Signup to reply.

I know this question has been answered, but I couldn’t help it… Use the name attribute for both form and all the form fields. Avoid using ids — they must be unique. You have two "groups" of form fields, put them in a fieldset so that you can refer to just those input elements. Avoid repeating code (like getting all input elements by id) and make use of looping. To avoid that the form submits when you use buttons like the upButton and the subbutton use the attribute type with the value "button". The submit button has the type of "submit".

I hope that you can use some of the ideas.

document.addEventListener('DOMContentLoaded', e => {
  let form = document.forms.form01;
  form.upButton.addEventListener('click', updateTextarea);
  form.subbutton.addEventListener('click', displaySummary);
});


function displaySummary(e) {
  let form = e.target.form;
  let incSummary = [...form.summary.elements].map(input => {
    return `${input.title.padEnd(25, ' ')}: ${input.value}`;
  }).join('n');
  document.getElementById('incSummary').innerText = incSummary;

  let incDescription = [...form.description.elements].map(input => {
    return `${input.title.padEnd(25, ' ')}: ${input.value}`;
  }).join('n');
  document.getElementById('incDescription').innerText = incDescription;

  var biznotes = `Incident Descriptionn${form.resultTextarea.value}n`;
  document.getElementById('biznotes').innerText = biznotes;
}


function updateTextarea(e) {
  let form = e.target.form;
  //Get the selected values from both dropdowns
  const bizimpactValue = form.bizimpact.value;
  const featuresValue = form.features.value;

  // Update the textarea dynamically based on the selected values
  form.resultTextarea.value = getUpdatedMessage(bizimpactValue, featuresValue);
}

function getUpdatedMessage(bizimpactValue, featuresValue) {
  // Return the updated message dynamically based on the selected values

  if (bizimpactValue === 'Full') {
    return "Please note we are observing full system outage impacting " +
      "the " + featuresValue + " functionality. ";
  } else if (bizimpactValue === 'Partial') {
    return "We are observing intermittent outage impacting the " +
      featuresValue + " functionality. ";
  }
  return '';
}

.botcontainer {
  font-family: monospace;
}

<form name="form01">
  <div class="Incident Generator">
    <span class="title">Service Affecting Incident</span>
    <fieldset name="summary">
      <div class="input-field">
        <label>Incident Status <select name="incstatus" title="Incident Status">
          <option value="Open">Open</option>
          <option value="Closed">Closed</option>
        </select></label>
      </div>
      <div class="input-field">
        <label>Incident Priority <select name="incpriority" title="Incident Priority">
          <option value="Low">Low</option>
          <option value="Medium">Medium</option>
          <option value="High">High</option>
        </select></label>
      </div>
      <div class="input-field">
        <label>Business Impact <select name="bizimpact" title="Business Impact">
          <option value="Partial">Partial</option>
          <option value="Full">Full</option>
        </select></label>
      </div>
      <div class="input-field">
        <label>Reported By <select name="reportedby" title="Reported By">
          <option value="Operator 1">Operator 1</option>
          <option value="OPerator 2">OPerator 2</option>
        </select></label>
      </div>
    </fieldset>
    <fieldset name="description">
      <div class="input-field">
        <label>Incident Description <input type="text" name="insshortdesc" cols="100" placeholder="Enter Incident Description" title="Incident Description"></label>
      </div>

      <div class="input-field">
        <label>Affected Features <select name="features" title="Affected Features">
          <option value="Login">Login</option>
          <option value="Signup">Signup</option>
        </select></label>
      </div>
      <div class="input-field">
        <label>Impacted Devices/App <select name="devices" title="Impacted Devices/App">
          <option value="iOS">iOS/iPAD OS</option>
          <option value="Android">Android Device</option>
        </select></label>
      </div>
    </fieldset>
    <div class="input-field">
      <label>Incident Description<br><textarea type="text" name="resultTextarea" rows="10" cols="100"></textarea></label>
    </div>
    <div><span id="result"></span></div>

    <span class="title">Incident Updates Goes Here</span>
    <div class="input-field">
      <textarea type="text" name="updatetextarea" rows="5" cols="100"></textarea>
    </div>

    <div>
      <button name="upButton" type="button">Generate</button>
      <button type="submit">Incident Update</button>
      <button name="subbutton" type="button">Preview</button>
    </div>
  </div>
</form>
<div class="botcontainer">
  <div><span id="incSummary"></span></div>
  <div><span id="incDescription"></span></div>
  <div><span id="biznotes"></span></div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.