Problem
Once the input is entered in the input field, and the check button is clicked, the input element gets converted into a span element and the check icon gets converted into an edit icon.
I want that when someone clicks on the edit icon, the span element gets converted into the input element again.
const container = document.querySelector(".container");
// Creating a SPAN element and appending it to div
container.addEventListener("click", (e) => {
const tgt = e.target.closest(".icons");
if (tgt) {
if (tgt.classList.contains("swapped")) return; // stop
if (tgt.classList.contains("check-icon")) {
tgt.classList.add("swapped");
let texts = document.querySelectorAll(".text");
let items = document.querySelectorAll(".items");
texts.forEach((text, i) => {
let span = document.createElement("span");
let val = document.createTextNode(text.value ? text.value : "");
span.appendChild(val);
span.classList.add("text2");
items[i].appendChild(span);
if (text.value) text.value = ""; // setting the input value to empty once clicked onto the check button
text.parentNode.replaceChild(span, text);
let btns = document.querySelectorAll(".mainicon"); // changing icon from check to edit
if (tgt.classList.contains("check-icon")) {
Array.from(btns).forEach((ele) => {
ele.classList.toggle("hidden");
});
}
});
}
}
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<body style="background-color: #007bff">
<div class="mainContainer">
<h1 class="heading">Details Collector</h1>
<div class="container">
<div class="items">
<label class="label" for="Name">Name :</label>
<input class="text" type="text" />
</div>
<div class="items">
<label class="label" for="State">State :</label>
<input class="text" type="text" />
</div>
<div class="items">
<label class="label" for="Country">Country :</label>
<input class="text" type="text" />
</div>
<div class="check-icon icons mainicon">
<i class="fa fa-check " aria-hidden="true"></i>
</div>
<div class="edit-icon icons hidden mainicon">
<i class="far fa-edit " aria-hidden="true"></i>
</div>
<div class="plus-icon icons ">
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
Js Fiddle
In your js file.
Modify the check-icon help block a bit, add the following code in the loop of btns.
if (ele.classList.contains("check-icon")) {
ele.classList.remove("swapped");
}
Adding this additional if block will help.
if (tgt.classList.contains("edit-icon")) {
let texts = document.querySelectorAll(".text2");
let items = document.querySelectorAll(".items");
texts.forEach((text, i) => {
let input = document.createElement("input");
input.value = text.textContent;
input.classList.add("text");
items[i].appendChild(input);
text.parentNode.replaceChild(input, text);
let btns = document.querySelectorAll(".mainicon"); // changing icon from check to edit
Array.from(btns).forEach((ele) => {
ele.classList.toggle("hidden");
if (ele.classList.contains("check-icon")) {
ele.classList.remove("swapped");
}
});
});
}
jsFiddel link
Created a span element next to inputs, hidden by default.
Created 2 different click events for edit and check buttons.
On click one element type is made hidden and the other looses its hidden class.
Did not work on styling so you may want to do that yourself.
Also it's better to change .span class to something appropriate.
Khalil's suggestion about making inputs disabled sound good, too.
const container = document.querySelector(".container");
const editIcon = document.querySelector(".edit-icon");
const checkIcon = document.querySelector(".check-icon");
const inputs = [...container.querySelectorAll('.text')]
const spans = [...container.querySelectorAll('.span')]
editIcon.addEventListener('click', () => {
spans.forEach((el, i) => {
el.classList.add('hidden');
inputs[i].classList.remove('hidden');
})
editIcon.classList.add('hidden');
checkIcon.classList.remove('hidden');
})
checkIcon.addEventListener('click', () => {
inputs.forEach((el, i) => {
spans[i].textContent = el.value;
el.classList.add('hidden');
spans[i].classList.remove('hidden');
})
checkIcon.classList.add('hidden');
editIcon.classList.remove('hidden');
})
.mainContainer {
height: 400px;
width: 900px;
background-color: white;
margin: 200px auto;
border: 5px solid black;
border-radius: 8px;
}
.heading {
font-family: "Roboto", sans-serif;
font-weight: bold;
text-align: center;
position: relative;
top: 15px;
}
.container {
width: 800px;
height: auto;
border: 2px solid black;
display: grid;
grid-template-columns: 230px 230px 230px 50px 50px 50px;
align-items: center;
margin: auto;
position: relative;
top: 30px;
padding: 10px;
background-color: #007bff;
}
.items {
display: flex;
align-items: center;
justify-content: center;
font-family: "Roboto", sans-serif;
font-weight: bold;
color: #fff;
}
.text {
width: 130px;
}
.icons {
font-size: 18px;
border: 2px solid #fff;
margin-left: 12px;
color: #007bff;
cursor: pointer;
background-color: #fff;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
}
.icons:hover {
color: #fff;
background-color: #007bff;
}
.hidden {
display: none;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body style="background-color: #007bff">
<div class="mainContainer">
<h1 class="heading">Details Collector</h1>
<div class="container">
<div class="items">
<label class="label" for="Name">Name :</label>
<input class="text" type="text" />
<span class="span hidden"></span>
</div>
<div class="items">
<label class="label" for="State">State :</label>
<input class="text" type="text" />
<span class="span hidden"></span>
</div>
<div class="items">
<label class="label" for="Country">Country :</label>
<input class="text" type="text" />
<span class="span hidden"></span>
</div>
<div class="check-icon icons mainicon">
<i class="fa fa-check " aria-hidden="true"></i>
</div>
<div class="edit-icon icons hidden mainicon">
<i class="far fa-edit " aria-hidden="true"></i>
</div>
<div class="plus-icon icons ">
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
</div>
</div>
</body>
</html>
Related
function togchq3chn(x) {
for (i = 1; i < 10; i++) {
var k = "kd" + i;
var c = "cd" + i;
if (x.id == k) {
document.getElementById(c).style.display = "block";
}
}
}
.chqsqr {
width: 25px;
height: 25px;
border: 1px solid rgb(180, 180, 180);
border-radius: 2px;
}
.shcursor {
cursor: pointer;
}
.inlineblock {
display: inline-block !important;
}
.bluefont {
color: rgb(0, 98, 167) !important;
}
.f17 {
font-size: 1.7em !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-1">
<div class="chqsqr shcursor inlineblock" id="kd1" onclick="togchq3chn(this)">
<i class="fas fa-check" id="cd1" style="position: relative; display:none; top:-2px; left: 2px; "></i>
</div>
</div>
<div class="col-md-1">
<div class="chqsqr shcursor inlineblock" id="kd2" onclick="togchq3chn(this)">
<i class="fas fa-check" id="cd2" style="position: relative; display:none; top:-2px; left: 2px; "></i>
</div>
</div>
<div class="col-md-1">
<div class="chqsqr shcursor inlineblock" id="kd3" onclick="togchq3chn(this)">
<i class="fas fa-check" id="cd3" style="position: relative; display:none; top:-2px; left: 2px; "></i>
</div>
</div>
</body>
</html>
Once i click on the check box it get selected but if i again click on the same check box the yes tick is not getting disabled.
I try that else section else{document.getElementById(c).style.display = "none";} but when i do this code. at time one checkbox i can get selected. this will work like a toggled.
Requirement: On the checkbox if i click again the yes tick will get respective checkbox yest tick disappeared.
You don't need to give one unique ID to each <div> and to each <i>. You don't need to loop 10 times on click, generate IDs, test if each ID matches the element you clicked, then show/hide another element with a composed ID.
What you are trying to do can be done with a simple toggle() on click. (And one jQuery!)
$(".chqsqr").click(function() {
$(this).find("i").toggle()
});
.chqsqr {
width: 25px;
height: 25px;
border: 1px solid rgb(180, 180, 180);
border-radius: 2px;
}
.shcursor {
cursor: pointer;
}
.inlineblock {
display: inline-block !important;
}
.bluefont {
color: rgb(0, 98, 167) !important;
}
.f17 {
font-size: 1.7em !important;
}
i.fas {
position: relative;
display: none;
top: -2px;
left: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="col-md-1">
<div class="chqsqr shcursor inlineblock">
<i class="fas fa-check"></i>
</div>
</div>
<div class="col-md-1">
<div class="chqsqr shcursor inlineblock">
<i class="fas fa-check"></i>
</div>
</div>
<div class="col-md-1">
<div class="chqsqr shcursor inlineblock" id="kd3">
<i class="fas fa-check" ></i>
</div>
</div>
If I understood your question then you wanted something like this?
function clickFunction(prop){
var nameProp = document.getElementsByName(prop.name);
var idProp = document.getElementById(prop.id);
if (idProp.checked) {
for(var i=0; i < nameProp.length; i++){
nameProp[i].disabled = false;
}
}
}
<tr><td><input type="checkbox" name="box" id="box1" value="1" tabIndex="1" onClick="clickFunction(this)">Test 1</td></tr>
<tr><td><input type="checkbox" name="box" id="box2" value="1" tabIndex="1" onClick="clickFunction(this)">Test 2</td></tr>
<tr><td><input type="checkbox" name="box" id="box3" value="1" tabIndex="1" onClick="clickFunction(this)">Test 3</td></tr>
I have dynamically updated list. Each list element has text input and delete button. I have 2 problems:
when I delete a list item, leninputs in cloneLi doesn't change
when I enter a text value in the first list item, it is copied also to the new one (i tried also elmtInput.reset(), but no change)
Do you have an idea what's wrong?
html code:
<ul id="sortable">
<li>
<div class="row">
<input type="text" id="item1" name="item1" value="">
<div>
<a class="btn" onclick="this.parentElement.parentElement.parentElement.style.display = 'none';"><i class="fas fa-trash"></i></a>
</div>
</div>
</li>
</ul>
<input type="submit" value="New item" class="btn" onclick="cloneLi()">
js:
function cloneLi() {
leninputs = document.getElementsByTagName("input").length;
if (leninputs < 5) {
var ul = document.getElementById("sortable");
var elmnt = ul.getElementsByTagName("li")[0];
var cln = elmnt.cloneNode(true);
document.getElementById("sortable").appendChild(cln);
var elmtInput = document.getElementsByTagName("input")[leninputs];
elmtInput.setAttribute("name", "item"+(leninputs+1).toString());
elmtInput.setAttribute("id", "item"+(leninputs+1).toString());
elmtInput.setAttribute("value", "");
} else {
alert('Max number of items reached!');
}
}
You need to exclude the button input from gettting selected with the other input elements, so be more precise in your selecting, and that will make your condition to have only five inputs as max instead of four correct because you were counting one plus input, you need to delete the li element instead of just hiding it and that keeps its input element as it is, you need to change the value of each new input cloned to avoid cloning the value as well
var listsContainer = document.querySelector("#sortable");
document.querySelector("#add_item").onclick = function() {
var inputLen = document.querySelectorAll("#sortable input").length, newList;
if(inputLen === 5) {
return alert('Max number of items reached!');
}
newList = document.createElement("li");
newList.innerHTML = `
<div class="row">
<input type="text" id="item${++inputLen}" name="item${inputLen}" value="">
<div>
<a class="btn" onclick="this.parentElement.parentElement.parentElement.remove();"><i class="fas fa-trash"></i></a>
</div>
</div>`;
listsContainer.appendChild(newList);
}
ul {
list-style-type: none;
margin: 0 0 10px 0;
padding: 0;
width: 300px;
}
.row {
background-color: lightgreen;
display: flex;
align-items: center;
border-radius: 10px;
padding: 10px;
margin-bottom: 5px;
}
.row div {
display: inline-block;
}
.row div i {
font-size: 20px;
color: white;
text-shadow: 0 0 5px green;
cursor: pointer;
}
.row input {
width: 85%;
margin-right: 10px;
border: none;
border-bottom: 1px solid #777;
}
#add_item {
display: none;
}
label {
background-color: #ccc;
color: white;
font: bold 24px monospace;
padding: 5px;
border-radius: 5px;
box-shadow: inset 1px 1px 3px #fff;
cursor: pointer;
}
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<ul id="sortable">
<li>
<div class="row">
<input type="text" id="item1" name="item1" value="">
<div>
<a class="btn" onclick="this.parentElement.parentElement.parentElement.remove();"><i class="fas fa-trash"></i></a>
<div>
</div>
</li>
</ul>
<label for="add_item"><input id="add_item" type="submit" class="btn">New item <i class='far fa-plus-square'></i></label>
The banner should stay close to the info buttons like in this example:
I want to move this "Ads by Google" label left away from the buttons.
function removeHeader() {
var list = document.getElementById("main");
list.removeChild(list.childNodes[0]);
}
body {
margin: 100px;
}
.banner-buttons {
display: inline-block;
position: relative;
font-size: 14px;
width: 50px;
overflow: hidden;
}
.showme {
display: none;
font-size: 10px;
}
.infoLink:hover .showme {
display: inline-block;
float: left;
}
.closeBtn {
cursor: pointer;
display: inline-block;
}
i:hover {
color: #d075f4;
}
<div id="main">
<div class="nanoSaturnBanner">
<p>teteasdasdasdsadasds sad asdasdasdasdasdas</p>
<div class="banner-buttons">
<label class="showme">Ads by Google</label>
<a class="infoLink" href="https://support.google.com/adsense/#topic=3373519" target="_blank">
<i class="fas fa-info-circle"></i>
</a>
<div class="closeBtn" onclick="removeHeader()">
<i class="far fa-window-close"></i>
</div>
</div>
</div>
HTML code: Here is the html, you will find the two buttons and icons there. If there is something missing just ask and I will update the post.
Try changing your p to a div and moving it after the other stuff. Then adding CSS to move the ad part:
<div id="main">
<div class="nanoSaturnBanner">
<div class="banner-buttons">
<label class="showme">Ads by Google</label>
<a class="infoLink"
href="https://support.google.com/adsense/#topic=3373519"
target="_blank">
<i class="fas fa-info-circle"></i>
</a>
<div class="closeBtn" onclick="removeHeader()">
<i class="far fa-window-close"></i>
</div>
</div>
<div id="text">teteasdasdasdsadasds sad asdasdasdasdasdas</div>
</div>
then add this to the new div class
float: right;
margin-right: 50%;
I have 3 radio buttons that are tied to a function that supposed to change an image inside a div when each button is checked. It's working ok but when I adding CSS style to it so the actual checker won't be visible to only the icons I set will show, it'makes it uncheckable.
Note: when I remove the #sm-jum-btns input CSS and the checkers actually visible the code working. I need it to work also when those checkers are hidden and designed.
HTML:
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css">
</head>
<div class="jumbotron text-center" id="main-jum">
<img id="jum-img" src = "https://im.whatshot.in/img/2017/Oct/churrosweb-1509092812.jpg">
</div>
<div class="container-fluid text-center d-md-none" id="sm-jum-btns">
<input id="radio_left" type="radio" name="optradio" onclick="changeImg()">
<label id="btn-left"class="radio-inline sm-jum-btn ">
<span class="fa fa-layers fa-fw fa-circle-thin">
<i class="fa fa-circle"></i>
</span>
</label>
<input id="radio_middle" type="radio" name="optradio" onclick="changeImg()">
<label id="btn-left"class="radio-inline sm-jum-btn ">
<span class="fa fa-layers fa-fw fa-circle-thin">
<i class="fa fa-circle"></i>
</span>
</label>
<input id="radio_right" type="radio" name="optradio" onclick="changeImg()">
<label id="btn-left"class="radio-inline sm-jum-btn ">
<span class="fa fa-layers fa-fw fa-circle-thin">
<i class="fa fa-circle"></i>
</span>
</label>
</div>
<script type="text/javascript">
function changeImg(){
var jumImg = document.getElementById("jum-img");
var radioLeft = document.getElementById("radio_left");
var radioRight = document.getElementById("radio_right");
var radioMiddle = document.getElementById("radio_middle");
if (radioLeft.checked){
jumImg.src = "https://static.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg";
}
if (radioRight.checked){
jumImg.src = "https://images7.alphacoders.com/411/thumb-1920-411820.jpg";
}
if (radioMiddle.checked){
jumImg.src = "http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/Desktop-Wallpaper-4.jpg";
}
}
</script>
CSS:
#sm-jum-btns input {
margin:0;
padding:0;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
margin-top: 180px;
}
#sm-jum-btn {
position: relative;
}
.fa-circle-thin {
color: #ffb300;
width: 50px;
height: 50px;
font-size: 50px;
font-weight: bold;
}
.fa-circle-thin::before {
position: absolute;
padding: 3.5px;
margin-top:3.5px;
}
.fa-circle {
color: #ffb300;
width: 50px;
height: 50px;
line-height: 50px;
border-radius:50px;
font-size: 30px;
}
.fa-circle-thin:hover {
color: #37100B;
}
#main-jum {
padding: 0;
}
#main-jum img {
width: 100%;
min-height: 400px;
object-fit:cover;
}
Ok after two days of searching and asking I figure it out thanks to this answer.
Basically I should add a for attribute in each label to point it to it's parent input id so it can actually check the input and trigger the function.
more about for attribute you can find here
I'm new to JavaScript, so bear with me if I'm not explaining what I want that well. So basically I have a form for creating activities, so whenever the user fills the fields and hit save it will create an instance of the div containing the information. Now those information are basically just in lines, and I would like to organize them inside a box (div), but I'm not sure how to create it, is it using JS or HTMl?
Here is a picture of what I have working right now.
And here is a view of the code.
window.onload = function() {
function addAct(nameact, when, where,desc) {
var buses = document.querySelectorAll(".bus");
var curr = document.createElement("div");
curr.setAttribute("class", "name");
var p0 = document.createElement("p");
p0.setAttribute("class", "nameact");
p0.innerHTML = nameact;
var p1 = document.createElement("p");
p1.setAttribute("class", "whereisit");
p1.innerHTML = when;
var p2 = document.createElement("p");
p2.setAttribute("class", "when");
p2.innerHTML = where;
var p3 = document.createElement("p");
p3.setAttribute("class", "describtion");
p3.innerHTML = desc;
curr.appendChild(p0);
curr.appendChild(p1);
curr.appendChild(p2);
curr.appendChild(p3);
if (buses.length) {
buses[buses.length -1].insertAdjacentHTML("afterEnd", curr.outerHTML)
} else {
document.forms[1].insertAdjacentHTML("afterEnd", curr.outerHTML)
}
}
var obj = {nameact: "", when: "", where: "",desc:""};
document.forms[1].onchange = function(e) {
obj[e.target.name] = e.target.value;
}
document.forms[1].onsubmit = function(e) {
e.preventDefault();
addAct(obj.nameact, obj.when, obj.where, obj.desc)
}
}
<section id="cd-placeholder-2" class="cd-section cd-container">
<h2>Activities</h2>
<div id="Slider" class="slide-up">
<div>
<div class="contents" >
<form class="form2">
<div class="col-3">
<label>
Activity Name
<input placeholder="What is your activity?" tabindex="3" name="nameact" />
</label>
</div>
<div class="col-3">
<label>
Where?
<input placeholder="Where is it going to be?" tabindex="4" name="when" />
</label>
</div>
<div class="col-3">
<label>
When?
<input type="date" placeholder="mm\dd\yy" tabindex="4" name="where"/>
</label>
</div>
<div>
<label>
Care to share more?
<textarea placeholder="describtion of your activity" class="text" name="desc"></textarea>
</label>
</div>
<button type="submit" value="Submit" class="cd-btn" id="col-submit" style="position:relative;float:right;overflow:hidden;margin:10px;margin-top:30px;">Add Activity</button>
</form>
<div id="name"></div>
</div>
</div>
</div>
</section>
Any feedback is highly appreciated.
You need HTML+CSS+JS
HTML :
<div id="name"></div>
CSS
.row{
background-color: red;
border: 5px solid #333;
display: block;
position: relative;
overflow: hidden;
}
.nameact{
background-color:red;
height: 40px;
display: inline-block;
}
.whereisit{
background-color:green;
height: 40px;
display: inline-block;
}
.when{
background-color:blue;
height: 40px;
display: inline-block;
}
.describtion{
background-color:brown;
height: 40px;
display: inline-block;
}
JS
var obj = {nameact: "", when: "", where: "",desc:""};
document.forms[1].onchange = function(e) {
obj[e.target.name] = e.target.value;
}
document.forms[1].onsubmit = function(e) {
e.preventDefault();
addAct(obj.nameact, obj.when, obj.where, obj.desc)
}
function addAct(nameact, when, where,desc) {
var myhtml = '<div class="row"><div class="nameact">'+nameact+'</div><div class="whereisit">'+where+'</div><div class="when">'+when+'</div><div class="describtion">'+describtion+'</div></div>';
document.getElementById('name').innerHTML += myhtml;
}
You will need to update CSS code, based on your needs
If you need any help understanding this, please let me know. I've written a few css styles, and the html markup that they will be applied to. Make your javascript produce this markup, and do some reading about CSS to extrapolate this into a complete module.
<style>
.activity {
width: 645px;
height: 160px;
border: 2px solid #0000ff;
}
.activity > div {
padding: 20px;
}
.activity .top {
display: inline-block;
float: left;
width: 174px;
height: 30;
border-right: 1px solid #0000ff;
}
.activity .top.end {
width: 175px;
border-right: none;
}
.activity .bottom {
display: inline-block;
float: left;
width: 605px;
height: 50;
border-top: 1px solid #0000ff;
}
.activity .title {
display: block;
}
</style>
<div class="activity">
<div class="top">
<span class="title">ACTIVITY NAME</span>
<span>Skydiving</span>
</div>
<div class="top">
<span class="title">WHERE?</span>
<span>Dubai Palm Island</span>
</div>
<div class="top end">
<span class="title">2017-06-22</span>
</div>
<div class="bottom">
<span>CARE TO SHARE MORE?</span>
<span class="title">It will be a fun trip!</span>
</div>
</div>
I hope this gets you headed in the right direction!