I'm beginner in JS.
I have 2 functions. How to do :
if I click first button, make first function work, if I click second button, make second function work?
Apply pressed button value to function and then apply it to input field.
Example: when I type 'ABC' using Caesar Cipher , it would return 'NOP', when I type 'ABC' using my cipher (or any other), it would return 'BCD' (or any other value, it depends on which cipher is selected). Thanks everyone in advance
My Js and Html code below:
<div class="container">
<div class="row">
<form class="col s12 m12 l12">
<h2>JS Encription</h2>
<div class="row">
<div class="input-field col s5 m5 l5">
<input id="field1" placeholder="Type you text here" id="first_name" type="text" class="validate">
<label for="first_name">Input</label>
</div>
<div class="input-field col s5 m5 l5">
<input id="field2" disabled placeholder="Result is shown here" id="first_name" type="text" class="validate">
<label for="first_name">Output</label>
</div>
</div>
</form>
</div>
<div class="row switchBtns">
<div class="col s12 m12 l12">
<div id="caesarButton" class="col s3 m3 l3 ">
<a class="waves-effect waves-light btn-small">Caesar Cipher</a>
</div>
<div id="mineButton" class="col s3 m3 l3 ">
<a class="waves-effect waves-light btn-small">My Cipher</a>
</div>
<div class="col s3 m3 l3 ">
<a class="waves-effect waves-light btn-small">3rd Variant</a>
</div>
<div class="col s3 m3 l3 ">
<a class="waves-effect waves-light btn-small">4th Variant</a>
</div>
</div>
</div>
</div>
and JS code
// CAESAR
$("#caesarButton").click(function() {
var clicked = $(this).val();
$('#field1').val(encryp(clicked)).val();
});
$('#field1').on('keyup keypress blur', function () {
var textvalue = $(this).val();
$('#field2').val(encryp(textvalue)).val();
});
function encryp(tekst) {
var result = "";
var str = tekst.toUpperCase();
for (var i=0; i<str.length ; i++) {
var ascii = str[i].charCodeAt();
if(ascii>=65 && ascii<=77) {
result+=String.fromCharCode(ascii+13);
}
else if(ascii>=78 && ascii<=90) {
result+=String.fromCharCode(ascii-13);
}
else {
result+=" ";
}
}
return result ;
}
//MINE
$("#mineButton").click(function() {
var clicked = $(this).val();
$('#field1').val(encryp(clicked)).val();
});
$('#field1').on('keyup keypress blur', function () {
var textvalue = $(this).val();
$('#field2').val(encryp(textvalue)).val();
});
function encryp(tekst) {
var result = "";
var str = tekst.toUpperCase();
for (var i=0; i<str.length ; i++) {
var ascii = str[i].charCodeAt();
if(ascii>=65 && ascii<=77) {
result+=String.fromCharCode(ascii+3);
}
else if(ascii>=78 && ascii<=90) {
result+=String.fromCharCode(ascii-3);
}
else {
result+=" ";
}
}
return result ;
}
I whipped up a simplified example of contextually switching input handler functions for you, here ya go:
// use an object as a key-value store for your functions
var funcs = {
caesar: encryp1, // i dont know if i got these the right way around :D
mine: encryp2
}
// store which funciton is currently selected in a variable
var selected = "caesar"
// call this function just to show the default selected function
determineOutput()
// CAESAR
$("#caesarButton").click(function() {
console.log("caesar button clicked!")
// here assign which function to use
selected = "caesar"
determineOutput()
});
//MINE
$("#mineButton").click(function() {
console.log("mine button clicked!")
// here assign which function to use
selected = "mine"
determineOutput()
});
$('#field1').on('keyup keypress blur', function () {
// this function is alled every time one of the events
// listed happens on the #field1 element
determineOutput()
});
function determineOutput(){
var textvalue = $('#field1').val();
//use the function currently selected by addressing it with
// [] on the funcs object
var correctFunction = funcs[selected]
// then call the selected function with the input text
$('#field2').val(correctFunction(textvalue));
// show the user which cipher we're using
$("#currentCipher").html("current cipher:" + selected)
}
function encryp1(tekst) {
var result = "";
var str = tekst.toUpperCase();
for (var i=0; i<str.length ; i++) {
var ascii = str[i].charCodeAt();
if(ascii>=65 && ascii<=77) {
result+=String.fromCharCode(ascii+13);
}
else if(ascii>=78 && ascii<=90) {
result+=String.fromCharCode(ascii-13);
}
else {
result+=" ";
}
}
return result ;
}
function encryp2(tekst) {
var result = "";
var str = tekst.toUpperCase();
for (var i=0; i<str.length ; i++) {
var ascii = str[i].charCodeAt();
if(ascii>=65 && ascii<=77) {
result+=String.fromCharCode(ascii+3);
}
else if(ascii>=78 && ascii<=90) {
result+=String.fromCharCode(ascii-3);
}
else {
result+=" ";
}
}
return result ;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input id="field1" placeholder="Type you text here" type="text">
<label for="field1">Input</label>
</div>
<div>
<input id="field2" disabled placeholder="Result is shown here" type="text" class="validate">
<label for="field2">Output</label>
</div>
<p id="currentCipher"></p>
<button id="caesarButton">
Caesar Cipher
</button>
<button id="mineButton">
My Cipher
</button>
Related
I am using Google App Script. I am trying to connect my HTML doc to my JS doc. So I can get the input from the user and use it to record the info to a Google Sheet and return an on-screen result. I have tried so many things and have come up short.
<div class="card carousel-item">
<div class="card-image">
<img src="https://i.postimg.cc/htb6hMf4/Solution-Builder-Tech-Savvy.png" />
<div class="row">
<div class="range-field">
<div id="min" class="col s1 rangeMinMaxText" style="display: inline">1</div>
<div class="col s10">
<input type="range" id="qt1" min="1" max="5" oninput="updateSliderValue()" />
</div>
<div id="max" class="col s1 rangeMinMaxText" style="display: inline">5</div>
</div>
</div>
<!--CLOSE ROW-->
</div>
<!--CLOSE CARD-->
</div>
document.getElementById("btn").addEventListener("click", doStuff);
function updateSliderValue() {
var sliderValue = document.getElementById("qt1").value;
// document.getElementById("sliderValue").innerHTML = sliderValue;
surveyData.questionOne = sliderValue;
console.log("Slider Value: " + sliderValue);
surveyData = list.map(function (r) {
Logger.log(r[0]);
});
}
function doStuff() {
var qt1 = document.getElementById("qt1");
var qt2 = document.getElementById("qt2");
var qt3 = document.getElementById("qt3");
var qt4 = document.getElementById("qt4");
var qt5 = document.getElementById("qt5");
var qt6 = document.getElementById("qt6");
var qt7 = document.getElementById("qt7");
var qt8 = document.getElementById("qt8");
var qt9 = document.getElementById("qt9");
var qt10 = document.getElementById("qt10");
var qt11 = document.getElementById("qt11");
var qt12 = document.getElementById("qt12");
surveyData.questionOne = qt1.value;
surveyData.questionTwo = qt2.value;
surveyData.questionThree = qt3.value;
surveyData.questionFour = qt4.value;
surveyData.questionFive = qt5.value;
surveyData.questionSix = qt6.value;
surveyData.questionSeven = qt7.value;
surveyData.questionEight = qt8.value;
surveyData.questionNine = qt9.value;
surveyData.questionTen = qt10.value;
surveyData.questionNine = qt11.value;
surveyData.questionTen = qt12.value;
Logger.log(surveyData);
google.script.run.withSuccessHandler(updateResult).userResults(surveyData);
google.script.run.userClicked(surveyData);
function updateResult(result) {
document.getElementById("result").value = result;
M.textareaAutoResize($("result"));
M.updateTextFields("result");
$("result").val("result");
Logger.log(surveyData);
}
}
I tried using all kinds of event listeners. I am able to log the input but having trouble getting it added to an array.
Try something like this.
<input type="range" min="0" max="10" value="0" oninput="rangeOnInput(this)">
<script>
function rangeOnInput(input) {
alert(input.value);
}
</script>
I don't know javascript but I want to use, search on my site. I found a good example on stackoverflow link
I joined all the parts and received the following code:
function SearchName() {
var input = document.getElementById("Search");
var filter = input.value.toLowerCase();
var nodes = document.getElementsByClassName('target');
var card = document.getElementsByClassName('card');
for (i = 0; i < nodes.length; i++) {
if (nodes[i].innerText.toLowerCase().includes(filter)) {
card[i].style.display = "block";
} else {
card[i].style.display = "none";
}
}
}
<input id="Search" onkeyup="SearchName();" class="form-control dsh191" type="text" placeholder="search" name="" />
<div class="d-flex m-0 p-0">
<div class="card">
Abc Def
<p class="dsh185">Code: <span class="code">1234</span></p>
</div>
<div class="card">
Qwr Tyu
<p class="dsh185">Code: <span class="code">5678</span></p>
</div>
<div class="card">
Iop Klj
<p class="dsh185">Code: <span class="code">9000</span></p>
</div>
</div>
Everything works fine, but I need to search by class = 'code'. My question is:
How do I search for Qwr Tyu and <p class="dsh185">Code: <span class="code">5678</span></p> ? What did I try?
I duplicated javascript function code and changed the class from target to code, but nothing was received, now the search goes after the first function in the input.
I added a new function to the input SearchCode();;
In <span>5678</span> I added class="code"
And as I said above I dubbed javascript code and I changed 2 variables: from nodes to code new class name and from card to profilecard, only the new variable but the html tag remains the same.
function SearchName() {
var input = document.getElementById("Search");
var filter = input.value.toLowerCase();
var nodes = document.getElementsByClassName('target');
var card = document.getElementsByClassName('card');
for (i = 0; i < nodes.length; i++) {
if (nodes[i].innerText.toLowerCase().includes(filter)) {
card[i].style.display = "block";
} else {
card[i].style.display = "none";
}
}
}
function SearchCode() {
var input = document.getElementById("Search");
var filter = input.value.toLowerCase();
var code = document.getElementsByClassName('code');
var profilecard = document.getElementsByClassName('card');
for (i = 0; i < code.length; i++) {
if (code[i].innerText.toLowerCase().includes(filter)) {
profilecard[i].style.display = "block";
} else {
profilecard[i].style.display = "none";
}
}
}
<input id="Search" onkeyup="SearchName(); SearchCode();" class="form-control dsh191" type="text" placeholder="search" name="" />
<div class="d-flex m-0 p-0">
<div class="card">
Abc Def
<p class="dsh185">Code: <span class="code">1234</span></p>
</div>
<div class="card">
Qwr Tyu
<p class="dsh185">Code: <span class="code">5678</span></p>
</div>
<div class="card">
Iop Klj
<p class="dsh185">Code: <span class="code">9000</span></p>
</div>
</div>
My question: How can I search the site after 2 html tags (Search by text in tags)?
Any idea how I can change the code, or where I went wrong etc ... Thanks
one idea can be to use innerText on parent tag profileCard
function SearchName() {
var input = document.getElementById("Search");
var filter = input.value.toLowerCase();
var nodes = document.getElementsByClassName('target');
var card = document.getElementsByClassName('card');
for (i = 0; i < nodes.length; i++) {
if (nodes[i].innerText.toLowerCase().includes(filter)) {
card[i].style.display = "block";
} else {
card[i].style.display = "none";
}
}
}
function SearchCode() {
var input = document.getElementById("Search");
var filter = input.value.toLowerCase();
var code = document.getElementsByClassName('code');
var profilecard = document.getElementsByClassName('card');
for (i = 0; i < code.length; i++) {
if (profilecard[i].innerText.toLowerCase().includes(filter)) {
profilecard[i].style.display = 'block';
} else {
profilecard[i].style.display = 'none';
}
}
}
<input id="Search" onkeyup="SearchName(); SearchCode();" class="form-control dsh191" type="text" placeholder="search" name="" />
<div class="d-flex m-0 p-0">
<div class="card">
Abc Def
<p class="dsh185">Code: <span class="code">1234</span></p>
</div>
<div class="card">
Qwr Tyu
<p class="dsh185">Code: <span class="code">5678</span></p>
</div>
<div class="card">
Iop Klj
<p class="dsh185">Code: <span class="code">9000</span></p>
</div>
</div>
I have created a form which can be dynamically changed using the buttons included. These buttons allow for more input fields to be added/removed. The issue is that the input fields created are not posting any data/ Values in those fields not being added to the $POST array on the submit of the form.
The main functions below resposible for adding and removing rows is RemoveRows() and addRows()
What should happen is that on submit all values in the form should be "posted" then I can access all of those fields via $_POST["nameOfField"].
The way I have currently approached this is to create an input fields with the relevant id's and names then append that field to where the "hard coded" fields exists.
From my initial debugging none of the fields that have been added via javascript are in $Post which I have checked via var_dump($_REQUEST);
I have also seen that the nodes that are added are not elements of the form tag even though the nodes are added between the opening and closing tag. This can be seen in the doBeforeSubmit() Function where we can see all elements that are children of the and this never changes as rows are added/removed.
function showPlatforms() {
let nacellesOptions = ["Option1", "option2", "Option3"];
let milOptions = ["Option1", "option2", "Option3"]
let highOptions = ["Option1", "option2", "Option3"]
let entry = document.getElementById("vs")
let platfom = document.getElementById("platform")
if (platform.hasChildNodes()) {
var lastChild = platfom.lastElementChild
while (lastChild) {
platfom.removeChild(lastChild)
lastChild = platform.lastElementChild
}
}
if (entry.value == "Nacelles") {
for (var i = 0; i < 2; i++) {
var option = document.createElement("option");
option.value = nacellesOptions[i]
option.innerHTML = nacellesOptions[i]
platform.appendChild(option)
}
} else if (entry.value == "Military") {
for (var i = 0; i < 2; i++) {
var option = document.createElement("option");
option.value = milOptions[i]
option.innerHTML = milOptions[i]
platform.appendChild(option)
}
} else {
for (var i = 0; i < 2; i++) {
var option = document.createElement("option");
option.value = highOptions[i]
option.innerHTML = highOptions[i]
platform.appendChild(option)
}
}
}
function formOptions() {
let entry = document.getElementById("type")
if (entry.value == "Engineering MAM") {
document.getElementById("WBS").disabled = false
document.getElementById("Desc").disabled = false
document.getElementById("ProName").disabled = false
} else {
document.getElementById("WBS").disabled = true
document.getElementById("Desc").disabled = true
document.getElementById("ProName").disabled = true
}
}
function formoptions2() {
let entry2 = document.getElementById("organisation")
if (entry2.value == "Aftermarket") {
document.getElementById("COT").disabled = false
document.getElementById("COC").disabled = false
} else {
document.getElementById("COT").disabled = true
document.getElementById("COC").disabled = true
}
}
count = document.getElementById("partNum").childElementCount
function addRows() {
rowNames = ["partNum", "partDesc", "leadTime", "quantity", "dateReq", "unitCost", "unitExtention", "unitSaleValue", "estSalesValue"]
rowNames.forEach(addRow, count)
count = document.getElementById("partNum").childElementCount
//doBeforeSubmit()
}
function doBeforeSubmit() {
var es = document.getElementById("form").elements;
var l = es.length;
var msgs = [];
for (var idx = 0; idx < l; idx++) {
var e = es[idx];
msgs.push('name=' + e.name + ', type=' + e.type + ', value=' + e.value);
}
alert(msgs.join('\n'));
return false;
}
function addRow(id) {
let col = document.getElementById(id)
var box = document.createElement("INPUT")
box.setAttribute("type", "text")
box.setAttribute("id", id + count)
box.setAttribute("name", id + count)
box.setAttribute("class", "form-control")
col.appendChild(box)
}
function RemoveRows() {
rowNames = ["partNum", "partDesc", "leadTime", "quantity", "dateReq", "unitCost", "unitExtention", "unitSaleValue", "estSalesValue"]
rowNames.forEach(removeBoxes)
count = document.getElementById("partNum").childElementCount
}
function removeBoxes(item) {
let box = document.getElementById(item)
let last = box.lastChild
box.removeChild(last)
}
function checkData() {
// if all stuff is correct do this:
document.getElementById("submit").disabled = false
// else dont activate the submit button.
}
<form method="post" id="form" action="SubmitMAM.php">
<div class="row" id="productRow" style="width:95%; margin:auto">
<div id="partNo" class="col-2">
<h3>Part Number:</h3>
</div>
<div class="col-2">
<h3>Part Description:</h3>
</div>
<div class="col-1">
<h3>Lead Time:</h3>
</div>
<div class="col-1">
<h3>Quantity:</h3>
</div>
<div class="col-1">
<h3>Date Required:</h3>
</div>
<div class="col-1">
<h3>Unit Cost:</h3>
</div>
<div class="col-2">
<h3>Unit Cost Extension:</h3>
</div>
<div class="col-1">
<h3>Unit Sale Value:</h3>
</div>
<div class="col-1">
<h3>Est Sales Value:</h3>
</div>
</div>
<div class="row" id="productRow" style="width:95%; margin:auto">
<div id="partNum" class="col-2">
<input type="text" id="partNum0" class="form-control" name="partNum0">
</div>
<div id="partDesc" class="col-2">
<input type="text" id="partDesc0" class="form-control" name="partDesc0">
</div>
<div id="leadTime" class="col-1">
<input type="text" id="leadTime0" class="form-control" name="leadTime0">
</div>
<div id="quantity" class="col-1">
<input type="text" id="quanitity0" class="form-control" name="quantity0">
</div>
<div id="dateReq" class="col-1">
<input type="text" id="dateReq0" class="form-control" name="dateReq0">
</div>
<div id="unitCost" class="col-1">
<input type="text" id="unitCost0" class="form-control" name="unitCost0">
</div>
<div id="unitExtention" class="col-2">
<input type="text" id="unitExtention0" class="form-control" name="unitExtention0">
</div>
<div id="unitSaleValue" class="col-1">
<input type="text" id="unitSaleValue0" class="form-control" name="unitSaleValue0">
</div>
<div id="estSalesValue" class="col-1">
<input type="text" id="estSalesValue0" class="form-control" name="estSalesValue0">
</div>
<button onclick="addRows()" class="btn btn-primary" type="button">Add a Product</button>
<button onclick="RemoveRows()" class="btn btn-primary" type="button">Remove Row</button>
<button onclick="checkData()" class="btn btn-primary" type="button">Check Data</button>
<br>
<button type="submit" name="submit" id="submit" class="btn btn-primary" disabled>Submit</button>
</form>
PHP:
<?php
var_dump($_REQUEST)
?>
UPDATE:
The code has been changed to use a php array by adding square brackets into the name which produces the following html:
<input type="text" id="partNum0" class="form-control" name="partNum[]">
<input type="text" id="partNum1" name="partNum[]" class="form-control">
<input type="text" id="partNum2" name="partNum[]" class="form-control">
You just need to use the name property of the input and add [] at the end, as GrumpyCrouton said. PHP parse it as an array, and you can access it as:
$partNum = $_POST["partNum"];
FIXED: It turns out the above code did not have any issues with the logic or the way it should work, in the source code in visual studio the indentation of some of the Divs was off causing the browser to have issues in rendering the form correctly hence why the added boxes were not included in the form and their values not POSTED.
As a heads up to anyone with maybe a similar issue, it pays to have your code neat.
I am trying to capture a sentence from a user's input and replicate it as a typing effect. I am using JavaScript to perform the task.
I am able to capture the input and display it with console.log(), but when I add the typing effect function, it doesn't seem to work.
My code are as follow. What's going wrong?
var getInput = document.getElementById("input");
getInput.onkeyup = function(e) {
if (e.keyCode == 13) {
var i = 0;
var text = input.value;
function typing() {
if (i < text.length) {
document.getElementById('output').innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, 200);
}
}
e.currentTarget.value = "";
}
}
<link href="https://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet">
<div class="background"></div>
<div class="input"></div>
<div class="typing">
<div class="input-group">
<div class="form-group">
<label for="text">Please Type Here:</label>
<input type="text" class="form-control" id="input">
</div>
</div>
</div>
<div class="output" id="output">
</div>
You have defined the typing function, but haven't called it.
Plus, in the setTimeout, you've called typeWriter function which is undefined. You wanted calling typing instead:
var getInput = document.getElementById("input");
getInput.onkeyup = function(e) {
if (e.keyCode == 13) {
var i = 0;
var text = input.value;
function typing() {
if (i < text.length) {
document.getElementById('output').innerHTML += text.charAt(i);
i++;
setTimeout(typing, 200);
}
}
typing();
e.currentTarget.value = "";
}
}
<div class="background"></div>
<div class="input"></div>
<div class="typing">
<div class="input-group">
<div class="form-group">
<label for="text">Please Type Here:</label>
<input type="text" class="form-control" id="input">
</div>
</div>
</div>
<div class="output" id="output">
</div>
You can use the keyup event in Javascript and listen to that event and update your DOM element on each keyboard stroke.
window.onload = function() {
let myInputElement = document.querySelector(`#myInput`);
if (myInputElement) {
myInputElement.addEventListener('keyup', function(event) {
let myTextElement = document.querySelector(`#myText`);
myTextElement.innerText = myInputElement.value;
});
}
}
<html>
<head>
</head>
<body>
<input id="myInput" />
<br>
<hr>
<p id="myText"></p>
</body>
I have a html form, where user need to enter the name and address of their office. The number of offices are dynamic.
I want to add an Add More button, so that users can enter the details of any number of offices.
My question is, how can I create an array of inputs where new elements can be added and removed using JavaScript. Currently, I'm doing it using js clone method, but I want an array, so that input data can easily be validated and stored to database using Laravel.
What I'm currently doing..
This is my HTML form where users have to enter the address of their clinic or office. I've taken a hidden input field and increasing the value of that field whenever a new clinic is added, so that I can use loop for storing data.
<div class="inputs">
<label><strong>Address</strong></label>
<input type="text" class="hidden" value="1" id="clinicCount" />
<div id="addresscontainer">
<div id="address">
<div class="row" style="margin-top:15px">
<div class="col-md-6">
<label><strong>Clinic 1</strong></label>
</div>
<div class="col-md-6">
<button id="deleteclinic" type="button" class="close deleteclinic"
onclick="removeClinic(this)">×</button>
</div>
</div>
<textarea name="address1" placeholder="Enter Clinic Address" class="form-control"></textarea>
<label class="text-muted" style="margin-top:10px">Coordinates (Click on map to get coordinates)</label>
<div class="row">
<div class="col-md-6">
<input class="form-control" id="latitude" type="text" name="latitude1" placeholder="Latitude" />
</div>
<div class="col-md-6">
<input class="form-control" id="longitude" type="text" name="longitude1" placeholder="Longitude" />
</div>
</div>
</div>
</div>
</div>
<div class="text-right">
<button class="btn btn-success" id="addclinic">Add More</button>
</div>
And my js code..
function numberClinic(){
//alert('test');
var i=0;
$('#addresscontainer > #address').each(function () {
i++;
$(this).find("strong").html("Clinic " + i);
$(this).find("textarea").attr('name','name'+i);
$(this).find("#latitude").attr('name','latitude'+i);
$(this).find("#longitude").attr('name','longitude'+i);
});
}
$("#addclinic").click(function(e){
e.preventDefault();
$("#addresscontainer").append($("#address").clone());
numberClinic();
$("#addresscontainer").find("div#address:last").find("input[name=latitude]").val('');
$("#addresscontainer").find("div#address:last").find("input[name=longitude]").val('');
$("#clinicCount").val(parseInt($("#clinicCount").val())+1);
});
function removeClinic(address){
if($("#clinicCount").val()>1){
$(address).parent('div').parent('div').parent('div').remove();
$("#clinicCount").val(parseInt($("#clinicCount").val())-1);
}
numberClinic();
}
This way, I think I can store the data to the database but can't validate the data. I'm using the laravel framework.
One way you could do this is by using the position of the input in the parent as the index in the array, then saving the value in the array every time each input is changed. Then you can just add and remove inputs.
Sample code:
var offices = document.getElementById('offices');
var output = document.getElementById('output');
var data = [];
var i = 0;
document.getElementById('add').addEventListener('click', function() {
var input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('placeholder', 'Office');
var button = document.createElement('button');
var index = i++;
input.addEventListener('keyup', function() {
for (var i = 0; i < offices.children.length; i++) {
var child = offices.children[i];
if (child === input) {
break;
}
}
// i is now the index in the array
data[i] = input.value;
renderText();
});
offices.appendChild(input);
});
document.getElementById('remove').addEventListener('click', function() {
var children = offices.children;
if (children.length === data.length) {
data = data.splice(0, data.length - 1);
}
offices.removeChild(children[children.length - 1]);
renderText();
});
function renderText() {
output.innerHTML = data.join(', ');
}
JSFiddle: https://jsfiddle.net/94sns39b/2/