function createDropdown() {
const selectElement = document.createElement('select');
selectElement.setAttribute('type', 'text')
toolresult.appendChild(selectElement);
const optionElement = document.createElement('option');
optionElement.setAttribute('value', 'Arial');
selectElement.appendChild(optionElement);
}
I am encountering an issue with creating the dropdown menu. Even though I have added an option element for Arial inside the select element, the dropdown does not show the option.
// JavaScript Code start
const sheets = document.getElementById('sheets');
const siteDocument = document.getElementsByTagName('body')[0];
const popup = document.getElementById('popup');
const buttons = document.getElementById('buttons');
const toolresult = document.getElementById('toolresult');
const item = document.getElementById('item');
// Popup logic
const myStuff = prompt('Enter \'columns, rows\' NOTE: 5,20 is recommended on computer, refer to documentation.');
let amountOfColumns, amountOfRows;
if (myStuff !== '' || myStuff.includes(',')) {
const myStuffArr = myStuff.split(',');
window.amountOfColumns = myStuffArr[0];
window.amountOfRows = myStuffArr[1];
} else {
window.amountOfColumns = 5;
window.amountOfRows = 20;
}
// Create Dropdown function
function createDropdown() {
const selectElement = document.createElement('select');
selectElement.setAttribute('type', 'text')
toolresult.appendChild(selectElement);
const optionElement = document.createElement('option');
optionElement.setAttribute('value', 'Arial');
selectElement.appendChild(optionElement);
}
var counter = 0;
for (var x = 0; x < window.amountOfRows; x++) {
for (var i = 0; i < window.amountOfColumns; i++) {
const newInputElement = document.createElement('input');
newInputElement.width = siteDocument
newInputElement.style.fontSize = '2vh';
counter++
newInputElement.setAttribute('id', 'newElement' + counter)
console.log(newInputElement.id);
newInputElement.addEventListener("focus", function doFunctionStuff() {
changeItem(newInputElement.id)
});
sheets.appendChild(newInputElement)
document.getElementById("sheets").style.gridTemplateColumns = "repeat(" + window.amountOfColumns +", 1fr)";
}
}
var inputs = document.getElementsByTagName("input");
for (var z = 0; z < inputs.length; z++) {
inputs[z].style.height = "calc((50vh/" +window.amountOfRows +") - 3px)";
}
// CSS Styling
const submitFormula = document.getElementById('submitFormula');
submitFormula.style.fontSize = '1vw';
submitFormula.style.width = '8em';
// Download Excel File Function
var A = [['n','sqrt(n)']];
for(var j=1; j<10; ++j){
A.push([j, Math.sqrt(j)]);
}
var csvRows = [];
for(var i=0, l=A.length; i<l; ++i){
csvRows.push(A[i].join(','));
}
var csvString = csvRows.join("%0A");
var a = document.createElement('a');
a.href = 'data:attachment/csv,' + encodeURIComponent(csvString);
a.target = '_blank';
a.download = 'myFile.csv';
document.body.appendChild(a);
a.click();
#titletext {
font-size: 5vh;
}
#sheets {
display: grid;
max-height: 100vh;
}
input {
min-width: 0px;
min-height: 0px;
text-align: center;
}
#buttons > button {
width: 20vw;
height: 4vh;
font-size: 2vh;
}
#itemVisible {
width: 8vw;
}
#enterFormula {
width: 8vw;
}<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>repl.it</title><link href="style.css" rel="stylesheet" type="text/css" /></head>
<body>
<div id="popup"></div>
<h1 id="titletext">Excel Sheets</h1>
<div id="buttons">
<button id="" onclick="">File</button>
<button id="" onclick="">Insert</button>
<button id="" onclick="">Page Layout</button>
<button id="" onclick="">Formulas</button>
<button id="" onclick="">Review</button>
<button id="" onclick="createDropdown()">Properties</button>
<button id="" onclick="">Developer</button>
<button id="" onclick="">Help</button>
</div> <br>
<div id="toolresult"></div>
<div id="item">
<input id="itemVisible" disabled></input>
<input id="enterFormula"></input>
<input type="submit" id="submitFormula"></input>
</div>
<div id="sheets" onchange="getItem()"></div>
<script src="script.js"></script>
</body>
</html>If you need the code snippet later: