Develop Reference

How do I make it so only one element is shown at once?

When the box is clicked on the insides for each of the boxes are shown, I only want one to show up at a time.
function select() {
const outside = document.querySelectorAll('.box')
const insides = document.querySelectorAll('.insides')
insides.forEach(insides => {
outside.forEach(box => {
box.addEventListener('mouseenter', (e) => {
box.setAttribute("id", "selected")
box.addEventListener('click', (e) => {
box.classList.add('hover')
if (document.getElementById('selected')) {
insides.classList.add('insidesHover')
}
})
})
box.addEventListener('mouseleave', (e) => {
box.classList.remove('hover')
box.setAttribute('id', 'testBox')
insides.classList.remove('insidesHover')
})
})
})
}
function newOption() {
var optionRow = document.createElement("div");
optionRow.setAttribute("class", "answers");
optionRow.setAttribute("id", "optionRow");
var option = document.createElement("input");
option.setAttribute("type", "radio");
option.setAttribute("name", "options");
option.setAttribute("id", "options");
var optionBox = document.createElement("div");
optionBox.setAttribute("class", "answerContainer")
optionBox.setAttribute("id", "optionBox")
var text = document.createElement("input");
text.setAttribute("type", "text");
text.setAttribute("name", "option");
text.setAttribute("id", "option");
text.setAttribute("placeholder", "Enter Option");
optionBox.append(optionRow);
optionRow.append(option);
optionRow.append(text);
document.getElementById("selected").append(optionRow);
array()
}
.testContainer {
width: 50%;
margin-left: 25%;
margin-top: 1%;
padding: 1%;
background-color: #333;
height: auto;
color: white;
}
.box {
background-color: white;
color: black;
padding: 25px;
border: 5px blue solid;
}
.hover {
border: #780119 5px solid;
}
.insides {
display: none;
}
.insidesHover {
display: flex;
}
.buttons {
display: none;
}
.buttonsHover {
display: flex;
height: 25px;
width: 25px;
border: 1px solid black;
border-radius: 100%;
}
<div class="testContainer">
<div class="box">
<div class="insides" id="testBox">
<input type="text" class="insidesHover">
<button onclick="newOption()" class="buttonsHover"> </button>
</div>
</div>
</div>
<div class="testContainer">
<div class="box">
<div class="insides" id="testBox">
<input type="text" class="insidesHover">
<button onclick="newOption()" class="buttonsHover"> </button>
</div>
</div>
</div>
<div class="testContainer">
<div class="box">
<div class="insides" id="testBox">
<input type="text" class="insidesHover">
<button onclick="newOption()" class="buttonsHover"> </button>
</div>
</div>
</div>
So the problem I am having is that I want to use a querySelectorAll() for the class of .box, which on click changes the outline to show it is being selected. Which is something that is fully functional and works. However, I also want it to show the inside pieces on click as well but only for one box at a time, which on the event listener of leave will disappear again. Once the inside of adding new options goes away, I need the options that were put in to stay. I have tried putting everything in one div class where the opacity is set to 0, but it makes it so the new options don't stay visible. I have also tried rearranging the variables so that the insides are affected first, which had no effect on the actual functionality. I believe the true issue lies in the fact that when the id, selected, is active it triggers all boxes to be active instead of individual ones. I am not entirely sure how to go about rectifying this issue and would like some advice on moving forward. If you have any questions or if something needs clarification please let me know! Thank you for your time and wish you all a good day!

How to correctly add CSS to input element through JavaScript

I have an input field with the class 'device_1' which has a css style applied to it. The function 'createNewInputField()'created new input field with the class 'device_2'. Every new field creation creates a new class name. I want to apply the same CSS style applied to 'device_1' to the newly created fields ('device_2', ... , 'device_X'). I have a function 'addStyle()' that is supposed to do exactly this but it does not actually apply the style.
var idNumber= 1;
var deviceID = "device_"+idNumber;
var kWattID = "kW_"+idNumber;
var hoursID = "hours_"+idNumber;
var totalID = "total_"+idNumber;
function createNewInputFields() {
idNumber = idNumber+1;
deviceID = "device_"+idNumber;
const containerDevice = document.getElementById('deviceCol');
const inputHtmlDevice = "<br><input type='text' id='"+deviceID+"' required>";
containerDevice.insertAdjacentHTML('beforeend', inputHtmlDevice);
containerDevice.style(addStyle(containerDevice, idNumber));
return idNumber;
}
function addStyle(container, number){
var styles = `
#device_`+number+`{
text-align: center;
border-radius: 10px;
border:solid #2b2b2b;
border-width: 2px;
}
`
return styles
}
#device_1{
text-align: center;
border-radius: 10px;
border:solid #2b2b2b;
border-width: 2px;
}
<div class="calculationSection">
<h1 class="energytitle">Energy calculations</h1>
<div class="row_2">
<div class="deviceCol" id="deviceCol">
<p><b>Device</b></p>
<input type="text" id="device_1" required>
</div>
<div class="addButton">
<button class="btn" onclick="createNewInputFields()"> Add device </button>
</div>
</div>

The error says it loud and clear containerDevice.style is not a function. To add styles, you need to add them one at a time as properties, like
containerDevice.style.backgroundColor = '#000'
but it's far more efficient and better practice to create actual styles in your css for this and just add or remove them
css:
.elementcss {
text-align: center;
border-radius: 10px;
border:solid #2b2b2b;
border-width: 2px;
}
javscript:
document.querySelector('.element').classList.add('elementcss')
document.querySelector('.element').classList.remove('elementcss')

Function not working after push() elements in html file

I want to create a to do list that will add elements typed in <input type="text"> and delete when clicked on button with class .delete. When ever I push elements in an array. And innerHTML it in html page, the delete button stops working. The delete button works for elements that are written into Html code. If someone can help me I will be very thankful.
`
const itemsLIst = document.querySelector('.item-list'); // where we want to add our list
const addText = document.querySelector('.submit'); // add button
let deleteText = document.querySelectorAll('.delete'); // delete button
// const list = JSON.parse(localStorage.getItem('items')) || [];
let list = [];
function addItem(e) {
let text = document.querySelector('.input_bar').value; //text typed in input bar
if (text.length != 0) {
list.push(`<div>
<p>${text}</p>
<button class="delete" onclick='deleteItem'>🗴</button>
<button class="edit">Edit</button>
</div><hr>`);
itemsLIst.innerHTML = list.join('');
text = '0';
document.getElementById("myText").value = "";
} else {
return;
}
}
function deleteItem(e) {
this.parentElement.style.display = 'none';
}
for (var i = 0 ; i < deleteText.length; i++) {
deleteText[i].addEventListener('click', deleteItem);
}
addText.addEventListener('click', addItem);
<style>
body {
width: 100%;
height: 100vh;
background-color: rgb(115, 115, 197);
margin: 0;
padding: 0;
position: relative;
}
.container {
width:50%;
height:70%;
position: absolute;
background-color: rgb(241, 241, 241);
font-family: Arial, Helvetica, sans-serif;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow-y: scroll;
}
.heading {
width: 100%;
height: 122px;
background-color: #5B45B9;
display: flex;
align-items: center;
justify-content: center;
}
.heading h1 {
color: white;
font-size: 40px;
}
.item-list {
width: 100%;
padding: 0 0 30px 0;
}
.item-list div {
width: auto;
height: 60px;
}
p {
width: 60%;
float: left;
font-size: 25px;
padding-left: 30px;
margin-top: 12px ;
}
.item-list button {
width: 60px;
height: 60px;
font-size: 18px;
float: right;
}
.delete {
font-size: 30px;
color: red;
}
.input_form {
width: 100%;
padding: 30px 0 30px 0;
position: absolute;
bottom: 0;
text-align: center;
}
.input_form .input_bar {
width: 80%;
height: 50px;
font-size: 18px;
border: none;
}
.input_form button {
width: 10%;
height: 50px;
float: right;
margin-right: 30px;
}
</style>
<html>
<head>
</head>
<body>
<div class="container">
<div class="heading">
<h1>TO-DO LIST</h1>
</div>
<div class="item-list">
<div>
<p>TEEXT2</p>
<button class="delete">🗴</button>
<button class="edit">Edit</button>
</div>
<div>
<p>TEEXT1</p>
<button class="delete">🗴</button>
<button class="edit">Edit</button>
</div>
<div>
<p>TEEXT3</p>
<button class="delete">🗴</button>
<button class="edit">Edit</button>
</div>
<div>
<p>TEEXT4</p>
<button class="delete">🗴</button>
<button class="edit">Edit</button>
</div>
</div>
<div class="input_form">
<input type="text" class="input_bar" id="myText" placeholder="Add ITEM">
<button class="submit">+ADD ITEM</button>
</div>
</div>
</body>
</html>
<button class="delete">🗴</button>
<button class="edit">Edit</button>
</div>
<div>
<p>TEEXT1</p>
<button class="delete">🗴</button>
<button class="edit">Edit</button>
</div>
<div>
<p>TEEXT3</p>
<button class="delete">🗴</button>
<button class="edit">Edit</button>
</div>
<div>
<p>TEEXT4</p>
<button class="delete">🗴</button>
<button class="edit">Edit</button>
</div>
</div>
<div class="input_form">
<input type="text" class="input_bar" id="myText" placeholder="Add ITEM">
<button class="submit">+ADD ITEM</button>
</div>
<script src="script.js"></script>
</div>
</body>
</html>`

You actually only trigger DOM "original" delete button (button loaded with your HTML code) with the line :
let deleteText = document.querySelectorAll('.delete'); // delete button
Your others .delete are loaded after the first DOM loading and are not even listed in "deleteText" array !
You have to refresh deleteText every time you add a new item. Something like :
const itemsLIst = document.querySelector('.item-list'); // where we want to add our list
const addText = document.querySelector('.submit'); // add button
let deleteText = document.querySelectorAll('.delete'); // delete button
// const list = JSON.parse(localStorage.getItem('items')) || [];
let list = [];
function addItem(e) {
let text = document.querySelector('.input_bar').value; //text typed in input bar
if (text.length != 0) {
list.push(`<div>
<p>${text}</p>
<button class="delete" onclick='deleteItem'>🗴</button>
<button class="edit">Edit</button>
</div><hr>`);
itemsLIst.innerHTML = list.join('');
text = '0';
document.getElementById("myText").value = "";
} else {
return;
}
}
function deleteItem(e) {
this.parentElement.style.display = 'none';
}
function triggerDeleteButton(){
deleteText = document.querySelectorAll('.delete'); // delete button
for (var i = 0 ; i < deleteText.length; i++) {
deleteText[i].addEventListener('click', deleteItem);
}
}
addText.addEventListener('click', function(){
addItem() ;
triggerDeleteButton() ;
}
);

Without refreshing, you can add and edit data by using local storage
For example, like below, you can try once!
<script>
let customerData = [];
// Inserting new customer record into local storage
function insert() {
let company = document.getElementById("company").value;
let obj = {company};
customerData.push(obj);
synData(customerData);
let customerDetails = JSON.parse(localStorage.getItem("customerString"));
clearFileds();
displayelements(customerDetails);
}
function displayelements(customerDetails) {
let html = "<table id='customer_data' border='1'><tr><th>Sl No</th><th>Company</th><th>Delete</th></tr>";
if(customerDetails == '') {
html+="<tr>No record found!</tr>";
} else {
customerDetails.map((values, index) => {
html+="<tr id='row_data'>";
html+="<td>"+index+"</td>";
html+="<td>"+values.company+"</td>";
html+="<td onclick='deleteRow(" + index + ")'>Delete</td>";
html+="</tr>";
} )
}
html+="</table>";
document.getElementById("display").innerHTML = html;
clearFileds();
}
// Delete the specific customer record from local storage
function deleteRow(deleteKey) {
let customerDetails = JSON.parse(localStorage.getItem("customerString"));
customerDetails.map((values, index) => {
if (index == deleteKey) {
customerDetails.splice(index, 1);
}
})
customerData = customerDetails;
synData(customerDetails);
displayelements(customerDetails);
}
// Clearing the form input field data
function clearFileds() {
document.getElementById("company").value = '';
}
// Updating local storage data
function synData(customerDetails) {
localStorage.setItem('customerString', JSON.stringify(customerDetails));
}
</script>
<html>
<head>
<title>Save</title>
</head>
<script ></script>
<body id="format_background">
<div id="customerAction" >
<h1>Customer data</h1>
<label>Company Name </label>
<input id="company" type="text" />
<button type="button" value="Save&Show" onclick="insert()" id="insert">Save</button>
</div>
<div id="display"></div>
</body>
</html>

Make HTML 'value' attribute a link

I'd like to turn the output of the HTML input value into a clickable link.
Currently, it looks like: <input type="email" class="form-control" name="contactEmail" value="<?php echo $row_rsContactDetails['contactEmail']; ?>">
I've tried using PHP and JavaScript to create the link but this just ended up displaying the HTML code verbatim.
Can it be done, and if so, how?

You don't need to enter the link to output as value, you need a workaround
here is my suggestion:
https://jsfiddle.net/4w58ed3o/1/
HTML:
<div class="box">
<input type="email" id="myinput" value="default#email.com">
</div>
<button id="myswitcher">Edit</button>
JS:
let input = document.querySelector('#myinput');
let link = document.querySelector('#mylink');
let myswitcher = document.querySelector('#myswitcher');
let setLink = () => {
link.innerHTML = input.value;
link.setAttribute('href', 'mailto:' + input.value);
}
input.addEventListener('input', () => {
setLink();
});
setLink();
myswitcher.addEventListener('click', () => {
document.querySelector('.box').classList.add('editable');
input.focus();
});
input.addEventListener('blur', () => {
document.querySelector('.box').classList.remove('editable');
});
CSS
input, a {
display: inline-block;
padding: 0;
padding: 10px;
margin: 0;
text-decoration: none;
font-size: 16px;
font-family: inherit;
box-shadow: none;
border: none;
line-height: 1.2;
background-color: transparent;
}
input:focus, a:focus {
outline: 1px solid #000;
}
.box {
position: relative;
display: inline-block;
}
input {
position: absolute;
box-sizing: border-box;
top: 0;
left: 0;
width: 100%;
}
.box input {
opacity: 0;
pointer-events: none;
}
.box.editable a {
opacity: 0;
pointer-events: none;
}
.box.editable input {
opacity: 1;
pointer-events: auto;
}
I made a working example of implementation for you, substitute data from the server and be inspired by my solution.

You could use javascript/jquery to achieve the same.
<html>
<body>
<input type="email" class="form-control" name="contactEmail" value="LINK HERE">
<span id="output"></span>
<script>
$(document).ready(function(){
var str = "LINK TITLE HERE";
var valueToLink = $(".form-control").val() //fetches the string to be converted to
//link
var result = str.link(valueToLink);
document.getElementById("output").innerHTML = result;
})
</script>
</body>
</html>
You could also hook up the above logic to an event call, e.g, button click.

I don't think it is possible, but you can try this. And you can put <?php echo $row_rsContactDetails['contactEmail']; ?> in place to "SOME TEXT" as well.
SOME TEXT

Have different line-height between input and output area

I'm trying to make a terminal shell like page.
See my code at jsfiddle:
http://jsfiddle.net/paopaomj/qGw4Q/9/
The input line seems have more line-height then the outputs.
Try it and type something press some enters you'll know what I mean.
Thanks.
html:
<body>
<div id="output"></div>
<div id="input">
root#host
<input type="text" id="command" />
</div>
javascript:
$("#command").keyup(function (e) {
if (e.keyCode == 13) {
submit();
}
});
var submit = function () {
var commandEl = document.getElementById("command");
var command = commandEl.value;
var outputel = document.getElementById("output");
var new_row = document.createElement("div");
new_row.innerHTML = "root#host " + command;
outputel.appendChild(new_row);
commandEl.value="";
};

The input got some padding. Add
padding:0px;
margin-left:-1px;
to the input css

OK.
I got it sovled finally by setting margin=0 for input field, margin-top=0 for iutput div, and margin-bottom=0 for output div:
#output { margin-bottom: 0px; background-color: #000000; }
#input { margin-top: 0px; background-color: #000000; }
input {
border: 0;
background: #000000;
color: #00FF00;
outline: none;
font-family:'Rosario', sans-serif;
font-size: 16px;
padding: 0px;
margin-left: -0.1px;
margin: 0px;
}
Thanks for Johan's help!