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 do i stop alert box from closing out itself?

document.getElementById("error").style.display = "none";
document.getElementById("submit").onclick = function() {
document.getElementById("error").style.display = "";
}
.alert-er {
padding: 20px;
background-color: #ff2400;
color: #ffffff;
font-size : 20px;
border : 1px solid white;
border-radius : 20px;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bolder;
float: right;
font-size: 40px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
<div id="error" class="alert-er">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<strong>Error!</strong>
</div>
<form>
<button type="submit" id="submit" class="submit">Submit</button>
</form>
a tried to display a alert box showing error and it worked fine until i changed display properties. now it appears and then disappears automatically in less than a second. i tried cheking for errors. i changed codes different times using css, js and jquery. but in all of those cases happened the same. please do care to help.

The problem is that when you click the submit button, the form is being submitted.
To fix this, let's create an event listener for when the form is submitting. If we find an error, we don't let it continue the submission, and show the error message instead. We do this with the help of event.preventDefault():
const form = document.querySelector('form');
const errorMessage = document.getElementById("error");
form.addEventListener('submit', (event) => {
if(thereIsAnError()){
event.preventDefault();
errorMessage.style.display = "block";
}
})
function thereIsAnError(){
return true; // later, change this function to return true or false depending on your input values
}
document.getElementById("error").style.display = "none";

Try using
type="button"
in
<button type="button" id="submit" class="submit">Submit</button></form>
<div id="error" class="alert-er">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<strong>Error!</strong>
</div>
<form>
<button type="button" id="submit" class="submit">Submit</button>
</form>

Button click Triggers Text Below

I want to set up a functionality for a button that causes text to appear underneath it on click.
For example, when you click a button that says "Sign up now", text would appear underneath the button that says "Are you a member, yes or no?".
"Yes" and "No" would be links that bring you to a different page depending on how you answer.
My button code so far (just html and styling done):
<a href="/ticket-link" target="_blank" class="ticket-button">Sign Up
Now</a>
I'm new with this kind of functionality so any help would be greatly appreciated!
Thanks!

Adjust the href attribute as you want.
$('#btn').click(function() {
$('#modal').fadeIn();
});
a {
display: block;
text-decoration: none;
color: white;
background-color: #333;
width: 100px;
padding: 20px;
border-radius: 5px;
margin: 0 auto;
}
#modal {
width: 300px;
height: 120px;
background-color: #ccc;
border-radius: 5px;
margin: 0 auto;
display: none;
}
#modal h3 {
text-align: center;
padding: 10px;
}
#modal a {
width: 50px;
display: inline-block;
text-align: center;
margin: 0 auto;
height: 10px;
vertical-align: middle;
line-height: 10px;
}
.btns {
width: 200px;
margin: auto;
}
a:hover {
background-color: #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="/ticket-link" target="_blank" class="ticket-button" id='btn'>Sign Up Now</a>
<div id='modal'>
<h3>Are you a member?</h3>
<div class='btns'>
Yes
No
</div>
</div>

You could use the onClick function to unhide text, or elements, below it.
Sign Up Now
<span style="display:none;" id="text">This is some text :D</span>

simple way:
Sign Up Now
<script>
function confirmSignup(){
if(confirm("Are you sure?"))
{
window.location.href="http://somelocation.com/sign-up";
}
}
</script>

Like #Pety Howell said, you can use the onClick function to unhide the text. Here's a pretty straightforward way to do it with jQuery.
$(function() {
$('.link').on('click', function() {
$('.span').addClass('open');
});
});
.span {
display: none;
}
.open {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click me
<span class="span">I'm hidden!</span>
Working fiddle: https://jsfiddle.net/3gr03yzn/4/

You could use jQuery toggle() function.
HTML :
<button id="member">
Are you Member ?
</button>
<div class="answer">
Yes<br />
No
</div>
JS :
$("#member").click(function() {
$(".answer").toggle();
});
CSS :
.answer {
display:none;
}
The working example on jsFiddle.
Hope this helps

Try this code.
please vote if this code helpful to you
function execute(){
var x = document.getElementById('link_list');
var y =document.getElementById('btn');
if(x.style.visibility==="hidden"){
y.style.visibility="hidden";
x.style.visibility="visible";
}
}
<button onclick="execute()" id="btn">sign up</button>
<div id="link_list" style="visibility:hidden">
Are you a member, <button onclick="window.open('http://sparrolite.blogspot.in')">Yes</button> or <button onclick="window.open('google.com')">no</button>
</div>

Most answers mentioned here either uses
jQuery or,
onclick attribute which is obtrusive javascript.
Here's how to achieve the desired behavior using vanilla, unobtrusive JavaScript.
window.onload = function() {
var button = document.querySelector('.ticket-button');
var info = document.querySelector('.info');
info.style.display = 'none';
var dispalyInfo = false;
button.onclick = function(e) {
e.preventDefault(); /* prevent page from navigating to a new page onclick */
if (dispalyInfo) {
info.style.display = 'none';
dispalyInfo = false;
} else {
info.style.display = 'initial';
dispalyInfo = true;
}
}
}
.ticket-button {
display: block;
}
Sign Up Now
<span class="info">Are you a member, yes or no?</span>
References:
Document.querySelector()
HTMLElement.style

Apply error message to textbox

i am trying to apply some validation error to controls like textbox. i initially was using qtip.js but for some reason it's not working well. so, i was trying to manually show error at the position i would like to show.
How would i exactly get the coordinates at the right-top corner of a control(eg: textbox as shown in picture) so i can show error message. i tried to use offset feature but to no avail.
var x = $("txtBox1").offset();
var relativeX = (e.pageX - offset.left);
var relativeY = (e.pageY - offset.top);

I think it's best to just place the error right under the textbox using just plain HTML positioning. The manual positioning using JavaScript is not necessary.
Here is a fiddle: https://jsfiddle.net/v0k1jbug/
<input type="text">
<div class="error">Error</div>
Then if you are using JQuery you can show/hide/populate the error message as you wish.
Hope this helps.

jsFiddle : https://jsfiddle.net/jchotdjk/1/
html
<div class="container">
<div class="input-group">
<input type="text" />
<span class="error">Invalid email address</span>
</div>
</div>
CSS
.container {
padding: 25px;
background-color: #9b9;
}
.input-group input{
height: 20px;
}
.input-group .error{
position: relative;
top: -20px;
}
To place the error just above the input and to the right, place the error in a span. Then you need to set the position of the error to relative and then force it up by the total height of the input which I have specified as 20px

What you need to do is the following:
Create 3 elements, a container, an input and an element for the error.
<div class="input__group">
<input type="text">
<span class="error">Error Message.</span>
</div>
Then define the following CSS:
.input__group {
position: relative;
display: inline-block;
margin-top: 50px; /* Since the error position is absolute, you will need
to add some space, in this demo we are using a margin.*/
}
.error {
position: absolute;
bottom: 100%; /* Used to place the element to
the top by the total container's height (100%) */
left: 100%; /* Used to place the element to
the right by the total container's width (100%) */
}
.input__group {
position: relative;
display: inline-block;
margin-top: 50px;
}
.error {
position: absolute;
bottom: 100%;
left: 100%;
color: whitesmoke;
background-color: coral;
}
<div class="input__group">
<input type="text">
<span class="error">Error Message.</span>
</div>

Something like the below could be helpful.
Idea is to have a absolute positioned element inside a relative and then to adjust the position based on top (as per your question). It can be done without even using external library.
Sample to play around with:
$(document).ready(function() {
$("#validate").click(function(e) {
$(".inputForm").find(".inputFormMessage").show();
});
});
.inputForm {
position: relative;
}
.inputFormMessage {
display: none;
position: absolute;
top: -10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="inputForm">
<label for="txtBox">Enter Input:</label>
<input type="text" id="txtBox" />
<span class="inputFormMessage">Input is not valid!</span>
</div>
<div>
<input type="button" id="validate" value="Validate" />
</div>
</div>
Another snippet to play around with (positioning is controlled by Styles and rendering upon action)
window.onload = function() {
// Attach handler to `validate` button
document.querySelector("#validate").onclick = function(e) {
var isValid = false;
var elementToCheck = null;
// Disable if any `message` elements are active
Object.values(document.querySelectorAll(".inputFormRowMessage")).forEach(function(element, index, array) {
element.style.display = "none";
});
// Validate First name
elementToCheck = document.querySelector("#txtBoxFirstName");
isValid = elementToCheck.value.length > 0;
if (!isValid) {
// Show the error message
document.querySelector(".inputFormRowMessageFirstName").style.display = "inline-block";
}
// Validate Last name
elementToCheck = document.querySelector("#txtBoxLasttName");
isValid = elementToCheck.value.length > 0;
if (!isValid) {
// Show the error message
document.querySelector(".inputFormRowMessageLasttName").style.display = "inline-block";
}
// .. do other validations and stylings...
// ...
};
};
.inputForm {
font-family: "Trebuchet MS", Verdana, Tahoma;
font-size: 12px;
}
.inputFormRow {
position: relative;
padding: 10px;
margin: 10px;
}
.inputFormRow > label {
width: 100px;
display: block;
float: left;
}
.inputFormRowMessage {
display: none;
position: absolute;
top: -10px;
padding: 2px;
color: red;
}
<div>
<div class="inputForm">
<div class="inputFormRow">
<label for="txtBoxFirstName">First Name:</label>
<input type="text" id="txtBoxFirstName" />
<span class="inputFormRowMessage inputFormRowMessageFirstName">Please enter First Name.</span>
</div>
<div class="inputFormRow">
<label for="txtBoxLasttName">Last Name:</label>
<input type="text" id="txtBoxLasttName" />
<span class="inputFormRowMessage inputFormRowMessageLasttName">Please enter Last Name.</span>
</div>
<div class="inputFormRow">
<label for="txtBoxAge">Age:</label>
<input type="text" id="txtBoxAge" />
<span class="inputFormRowMessage">Not a valid age format.</span>
</div>
<div>
<input type="button" id="validate" value="Validate" />
</div>
</div>

jQuery expanding search icon input, not quite working

I have this search box that I have done so far but new to JS so a little stuck.
I need it to slide to the right to reveal the input behind it, it did work when I used just button but I guessed I needed to add just the icon so did not submit when you clicked it but slide across, but then I guess also need to make the button show and the icon hide when you enter something in the input and if not when you click icon would just close again.
Something a bit like this I guess.... http://codepen.io/nikhil/pen/qcyGF - which is what I've been trying to base it off.
searchExpand = function(elm){
var spanIcon = $('.span-icon'),
searchInput = $('.search-input'),
searchForm = $('.search-form'),
btnSearch = $('.btn-search'),
isOpen = false;
if(isOpen == false){
searchForm.addClass('open');
spanIcon.hide();
btnSearch.show();
searchInput.focus();
isOpen = true;
} else {
searchForm.removeClass('open');
btnSearch.hide();
spanIcon.show();
searchInput.focusout();
isOpen = false;
}
}
$(document).ready(function(){
// lets make the search feature happen!
$(document).on("click", "span.btn-search", function() {
searchExpand(this);
});
});
.search-form {
width: 0%;
}
.search-form input {
border-right-style: none;
}
.search-form button {
background: none;
padding: 0;
display: none;
}
.search-form button i {
font-size: 1.9em;
color: #000;
padding: 10px;
}
.search-form span.search-icon {
font-size: 1.9em;
color: #000;
padding: 10px;
cursor: pointer;
}
.search-form .form-control {
padding: 0;
border: 0;
}
.search-form .input-group-addon {
background: #fff;
border: 0;
}
.search-form.open {
width: 100%;
}
.search-form.open .form-control {
padding: 30px 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<form role="search" class="search-form">
<div class="input-group add-on">
<input type="text" class="form-control search-input" placeholder="Enter a search term" name="search" id="search">
<div class="input-group-addon">
<button class="btn btn-clear btn-search" type="submit"><i class="glyphicon glyphicon-search search-icon"></i></button>
<span class="span-icon glyphicon glyphicon-search search-icon"></span>
</div>
</div>
</form>

Notice that your .btn-search isn't inside a span, so your function, searchExpand will not run. when you click the button.
What's in the span is "span-icon glyphicion.... "
If you're using jquery, this would be an effective way of achieving what you want:
Assign an ID to the span call it what you will, and change your js to reflect:
$( "#yourbuttonidname" ).click(function() {
searchExpand(this);
});
Example of the new span:
<span id="yourbuttonidname" class="span-icon glyphicon glyphicon-search search-icon"></span>