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
2
Answers
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:
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:Secondly, using
onclickis 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 withid="updateTextarea", which automatically creates the global variableupdateTextareaand sets it to the textbox. This is part of the DOM specification. Your<button onclick="updateTextarea()">is actually usingupdateTextareapointing to the textbox, and trying to call the textbox reference like a function, which it can’t do.You already use
addEventListenerso there’s no need foronclickanyway. This solves both problems:Your code has other issues which you can debug yourself by using the Chrome inspector and reading Javascript errors.
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.