JSFiddle: https://jsfiddle.net/5k38svc9/1/
I have a button. When clicked, a form is appended to the document. That works fine. However I also need the button to change its text, but can't achieve it:
<div class = "video-row">
<div class="video-buttons">
<div class="add-button green-button light-button">Add comedian to favourites</div>
<form style="display:none" id = "the-form" action="/login" method="post">
<h2 class="form-title">Login</h2>
<input class="form-input" type="text" placeholder="username" name="username">
<button class = "login light-button" type="submit">Send</button>
</form>
</div>
var addForm = function() {
var element = document.getElementById("the-form");
element.style.display = "block";
var button = $(event.target);
button.innerHTML = "Hide form";
}
var elements = document.getElementsByClassName("add-button");
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', addForm, false);
}
Any help is appreaciated.
Just change addForm to this:
var addForm = function(event) {
var element = document.getElementById("the-form");
element.style.display = "block";
var button = event.target;
button.innerText = "Hide form";
}
Basically in the snippet you don't have jQuery so you can't use it, also you are not passing event object to the event handler addForm, finally I used .innerText() instead of innerHTML() since you are replacing the text only.
here is a working snippet:
var addForm = function(event) {
var element = document.getElementById("the-form");
element.style.display = "block";
var button = event.target;
button.innerText = "Hide form";
}
var elements = document.getElementsByClassName("add-button");
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', addForm, false);
}
.video-row {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.video-buttons {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.light-button {
padding: 10px;
background-color: green;
border-radius: 25px;
cursor:pointer;
}
<div class = "video-row">
<div class="video-buttons">
<div class="add-button green-button light-button">Add comedian to favourites</div>
<form style="display:none" id = "the-form" action="/login" method="post">
<h2 class="form-title">Login</h2>
<input class="form-input" type="text" placeholder="username" name="username">
<button class = "login light-button" type="submit">Send</button>
</form>
</div>
The following solution may help your cause:
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunc()" id="myBtn">Press this Button</button>
<p id="demo"></p>
<script>
function myFunc() {
var x = document.getElementById("myBtn").textContent;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Related
i want to have multiple elements with same class that act independently, after 1 night of seeking if "forEach" has any 'forEach:active' i end up with code below, but i feel kind of little shame with 'nextSibling of parent of parent' but if is supported by atleast any modern browsers, then is better than nothing.
on codePen is working fine,as well as snippet here.
i wonder if i can find a better version in vanila js for it or if is there anything deprecated that i should change.
//get + button
const up = document.querySelectorAll('.up');
//tell to + to increase his previous frend value
[].forEach.call(up, function(element) {
element.addEventListener('click', function() {
this.previousElementSibling.value =
parseInt(this.previousElementSibling.value) + 1;
});
})
//get -
const down = document.querySelectorAll('.down');
//tell to - to decrease his next frend value && and hide
//dynamic
//input if == 0 && show firstAdd button
[].forEach.call(down, function(element) {
element.addEventListener('click', function() {
this.nextElementSibling.value =
parseInt(this.nextElementSibling.value) - 1;
if (this.nextElementSibling.value == 0) {
this.parentElement.parentElement.style.display = 'none';
this.parentElement.parentElement.nextElementSibling.style.display = 'initial';
}
});
})
//get firstAdd button
const fAdd = document.querySelectorAll('.firstAdd');
//tell to it to add dynamic input && to vanish itself after &&
//set input value = 1
[].forEach.call(fAdd, function(element) {
element.addEventListener('click', function() {
this.previousElementSibling.style.display = 'initial';
this.previousElementSibling.children[1].children[1].value = 1;
this.style.display = 'none'
});
})
.form-group {
width: 30%;
margin: 30px;
display: none;
}
.input-group {
flex-direction: row;
display: flex;
}
body {
background: #111;
}
<div class='one'>
<div class="form-group">
<label>value: </label>
<div class="input-group">
<button class="down">-</button>
<input type="text" class="myNumber" value='1'>
<button class="up">+</button>
</div>
</div>
<button class='firstAdd'>Add</button></div>
<br>
<div class='two'>
<div class="form-group">
<label>value: </label>
<div class="input-group">
<button class="down">-</button>
<input type="text" class="myNumber" value='1'>
<button class="up">+</button>
</div>
</div>
<button class='firstAdd'>Add</button></div>
I'm trying to make the checkbox behave with the Enter key (when tabbed into) the same way it usually does with the space bar or when clicked. I cooked up a case where the checkbox is indeed being checked, but it then doesn't act like it should, i.e. I want it to display a previously hidden text and disappear itself. How can I achieve this? Adding something like document.getElementById("myCheck").click() doesn't work, though.
document.addEventListener('keydown', (e) => {
if( e.key === "Enter" && e.target.classList.contains('myCheck')){
e.target.checked = !e.target.checked;
}
})
function myFunction() {
var form = document.getElementById("form");
var checkBox = document.getElementById("myCheck");
var text = document.getElementById("text");
if (checkBox.checked === true){
form.style.display = "none";
text.style.display = "block";
} else {
form.style.display = "inline-block";
text.style.display = "none";
}
}
* {
margin: 10px;
padding: 0;
font-size: 50px;
}
input {
width: 30px;
height: 30px;
}
p {
color: red;
text-transform: uppercase;
}
<form class="form" id="form" style="display:inline-block">
<input type="checkbox" class="myCheck" id="myCheck" onclick="myFunction()">
<label for="myCheck">Checkbox</label>
</form>
<p id="text" style="display: none;">checkbox is checked</p>
All you need to do is trigger the click event, that will check the box. If you manually set checked and then trigger click it will undo the manual setting.
document.addEventListener('keydown', (e) => {
if( e.key === "Enter" && e.target.classList.contains('myCheck')){
//e.target.checked = !e.target.checked;
e.target.click()
}
})
function myFunction() {
var form = document.getElementById("form");
var checkBox = document.getElementById("myCheck");
var text = document.getElementById("text");
if (checkBox.checked === true){
form.style.display = "none";
text.style.display = "block";
} else {
form.style.display = "inline-block";
text.style.display = "none";
}
}
* {
margin: 10px;
padding: 0;
font-size: 50px;
}
input {
width: 30px;
height: 30px;
}
p {
color: red;
text-transform: uppercase;
}
<form class="form" id="form" style="display:inline-block">
<input type="checkbox" class="myCheck" id="myCheck" onclick="myFunction()">
<label for="myCheck">Checkbox</label>
</form>
<p id="text" style="display: none;">checkbox is checked</p>
To reduce the number of lines of code I simplified my code to display three divs instead. What I want is to have a particular div displayed while hiding the other two divs depending on which radio button is checked.
I'm actually following these two links
Adding event listeners to multiple elements
How can I check whether a radio button is selected with JavaScript?
in the second link it was suggested to use
radios[i].type === 'radio' && radios[i].checked
for the test.
however I modified it to just
DisplayOption[i].checked
since its all I think i need. The error I'm receiving is
Uncaught TypeError: Cannot read property 'checked' of undefined
const column = document.querySelector('.column');
const table = document.querySelector('.table');
const details = document.querySelector('.details');
onload = function() {
const DisplayOption = document.getElementsByClassName("DisplayOption");
for (i = 0; i < DisplayOption.length; i++) {
DisplayOption[i].addEventListener('click', function() {
if (DisplayOption[i].checked) {
if (displyOption[i].value === "column") {
column.style.display = "grid";
table.style.display = "none";
table.details.style.display = "none";
} else if (displyOption[i].value === "table") {
column.style.display = "none";
table.style.display = "block";
table.details.style.display = "none";
} else {
column.style.display = "none";
table.style.display = "none";
table.details.style.display = "block";
}
}
}, false);
}
}
.column {
display: grid;
}
.table {
display: none;
}
.table.details {
display: none;
}
<input type="radio" name="DisplayOption" value="column" class="DisplayOption" checked>
<input type="radio" name="DisplayOption" value="table" class="DisplayOption">
<input type="radio" name="DisplayOption" value="details" class="DisplayOption">
<div class="column"> The first div is being displayed </div>
<div class="table"> The second div is being displayed</div>
<div class="table details"> The third div is being displayed </div>
Inside the eventListener, to refer to the element being clicked use this instead of DisplayOption[i]. Another bug was using table.details - it should be only details. See corrected demo below:
const column = document.querySelector('.column');
const table = document.querySelector('.table');
const details = document.querySelector('.details');
onload = function() {
const DisplayOption = document.getElementsByClassName("DisplayOption");
for (i = 0; i < DisplayOption.length; i++) {
DisplayOption[i].addEventListener('click', function() {
if (this.checked) {
if (this.value === "column") {
column.style.display = "grid";
table.style.display = "none";
details.style.display = "none";
} else if (this.value === "table") {
column.style.display = "none";
table.style.display = "block";
details.style.display = "none";
} else {
column.style.display = "none";
table.style.display = "none";
details.style.display = "block";
}
}
}, false);
}
}
.column {
display: grid;
}
.table {
display: none;
}
.table.details {
display: none;
}
<input type="radio" name="DisplayOption" value="column" class="DisplayOption" checked>
<input type="radio" name="DisplayOption" value="table" class="DisplayOption">
<input type="radio" name="DisplayOption" value="details" class="DisplayOption">
<div class="column"> The first div is being displayed </div>
<div class="table"> The second div is being displayed</div>
<div class="table details"> The third div is being displayed </div>
You could achieve the same using CSS ! No need of javascript !
You can make use of the sibling (~) selector in CSS and display the corresponding div
div {
display: none;
}
input[value="column"]:checked~.column,
input[value="table"]:checked~.table,
input[value="details"]:checked~.details {
display: block;
}
<input type="radio" name="DisplayOption" value="column" class="DisplayOption" checked>
<input type="radio" name="DisplayOption" value="table" class="DisplayOption">
<input type="radio" name="DisplayOption" value="details" class="DisplayOption">
<div class="column"> The first div is being displayed </div>
<div class="table"> The second div is being displayed</div>
<div class="details"> The third div is being displayed </div>
JSFiddle link
I am trying to change the display property of some text using JS, upon button click.
I have confirmed that the function is firing and running correctly using debugger, but for some reason, I can't grab the specific element I need to change, and assign it to a variable. I also have jquery set up on the page.
I have tried using the console, and document.getElementById('warning-textID') returns the correct element, but when I try to set it to a variable in console, it returns undefined. Am I missing something super obvious here?
Here is the HTML, function and css.
//adding event listener
$(function() {
document.getElementById("submitdiscount").addEventListener("click", putCookie);
});
// click function
function putCookie() {
var enteredValue = document.getElementById("nameBox").value;
var validParam = "test";
var warning = document.getElementById("warning-textID");
var cookieCreated = false;
if(enteredValue == validParam){
console.log('do the thing')
if(cookieCreated == false && enteredValue == validParam){
warning.innerText = "Please enable cookies";
warning.style.display = "";
return;
} else {
warning.innerText = "Please enter the correct code."
warning.style.display = "";
enteredValue.value = "";
return;
}
}
.warning-text {
color: red; text-align: center;
margin-bottom: 0px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="employee-code-input-wrapper" id="employee-code-input">
<div class="employee-code-input-header">
<h2>Enter the employee code you received via email</h2>
</div>
<div class="search-bar emplyoee-code-input-input-wrapper" >
<input class="emplyoee-code-input-input" type="text" placeholder="Enter Employee Code" code="" id="nameBox" name="pass">
<button class="btn btn--submit-employee-form" value="Submit" id="submitdiscount" type="button">submit</button>
</div>
<h2 class="warning-text" id="warning-textID">
Please enter the correct code.
</h2>
</div>
I fixed some mistakes and it worked.
//adding event listener
$(function() {
document.getElementById("submitdiscount").addEventListener("click", putCookie);
// click function
function putCookie() {
var enteredValue = document.getElementById("nameBox").value;
var validParam = "test";
var warning = document.getElementById("warning-textID");
var cookieCreated = false;
if (enteredValue === validParam) {
console.log('do the thing')
if (cookieCreated == false && enteredValue === validParam) {
warning.innerText = "Please enable cookies";
warning.style.display = "block";
return;
}
} else {
warning.innerText = "Please enter the correct code."
warning.style.display = "block";
enteredValue.value = "";
return;
}
}
});
.warning-text {
color: red;
text-align: center;
margin-bottom: 0px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="employee-code-input-wrapper" id="employee-code-input">
<div class="employee-code-input-header">
<h2>Enter the employee code you received via email</h2>
</div>
<div class="search-bar emplyoee-code-input-input-wrapper">
<input class="emplyoee-code-input-input" type="text" placeholder="Enter Employee Code" code="" id="nameBox" name="pass">
<button class="btn btn--submit-employee-form" value="Submit" id="submitdiscount" type="button">submit</button>
</div>
<h2 class="warning-text" id="warning-textID">
Please enter the correct code.
</h2>
</div>
Im creating a classic To Do list application in html/JS/CSS, where i have the following functionality :
User types inn his/hers Task
The task is then printet below with a checkbox on the same line
The task is also stored in an object with a timestamp.
All new tasks are added above old ones.
How can i solve the following problem, using ONLY css :
When the user checks the checkbox, the task on the corresponding line should be "lined out" so that it becomes clear that its completed.
I made a jsfiddle, but i cant make it run there, anyway here it is: https://jsfiddle.net/fm6cbuu9/2/
What i have so far :
JS :
var tasks = {}
function addTask(){
var task = document.getElementById("inn").value
var ol = document.getElementById("ol")
var li = document.createElement("li")
var d = new Date()
var box = document.createElement("input")
box.type = "checkbox"
box.id = "box"
li.appendChild(box)
li.appendChild(document.createTextNode(task))
ol.insertBefore(li, ol.childNodes[0])
tasks[d.getTime()] = task
console.log(tasks)
}
CSS:
input[type=checkbox] + li {
text-decoration: overline;
}
HTML:
<body>
<div id="container">
<div id="inner">
<h1> To Do List </h1>
<form id="skjema">
Enter Task: <input type="text" id="inn" required="true">
<button type="button" onclick="addTask()"> Submit Task </button> <br>
Count task: <input type="text" id="ut" disabled="true">
</form>
<ol id="ol">
</ol>
</div>
</div>
Rather than creating a text node for the task name, put it inside of a label for the checkbox. Then you just target the label next to the checked box in your CSS:
var tasks = {}
window.addTask = function(){
var task = document.getElementById("inn").value;
var ol = document.getElementById("ol");
var li = document.createElement("li");
var d = new Date();
var taskId = d.getTime();
var box = document.createElement("input");
box.type = "checkbox";
box.id = "box-" + taskId;
var label = document.createElement("label");
label.setAttribute("for", "box-" + taskId);
label.innerHTML = task;
li.appendChild(box);
li.appendChild(label);
ol.insertBefore(li, ol.childNodes[0]);
tasks[taskId] = task;
console.log(tasks);
}
#container {
display: block;
margin-right: auto;
margin-left: auto;
background-color: lightgray;
border-radius: 10px;
width: 800px;
height: auto;
z-index: 0;
padding: 20px;
}
input[type=checkbox]:checked + label {
text-decoration: line-through;
}
<title>To do list</title>
<body>
<div id="container">
<div id="inner">
<h1> To Do List </h1>
<form id="skjema">
Enter Task: <input type="text" id="inn" required="true">
<button type="button" onclick="addTask()"> Submit Task </button> <br>
Count task: <input type="text" id="ut" disabled="true">
</form>
<ol id="ol">
</ol>
</div>
</div>
</body>