I'm trying to make a specific div appear or not based on what I select in the listbox. but I don't understand where I'm wrong.
<html>
<head>
<style type='text/css'>
.multiselectUsers {
width: 200px;
display: none;
}
.multiselectAnagrafica {
width: 200px;
display: none;
}
.multiselectForm {
width: 200px;
display: none;
}
</style>
</head>
<body>
<form action='post'>
<select id='tabella' style='display:inline-block' onchange='Cusers();'>
<option value='users'>users</option>
<option value='anagrafica'>anagrafica</option>
<option value='form'>form</option>
</select>
<p style='display:inline-block'>output: </p>
<div class='multiselectUsers'>
<!--something-->
</div>
<div class='multiselectAnagrafica'>
<!--something-->
</div>
<div class='multiselectForm'>
<!--something-->
</div>
</form>
</body>
<script type='text/javascript'>
function Cusers(){
var users = 'users';
var anagrafica = 'anagrafica';
var form = 'form';
var e = document.getElementById('tabella');
var val = e.options[e.selectedIndex].value;
if (val == users) {
document.getElementById('multiselectUsers').style.display = 'inline-block';
document.getElementById('multiselectAnagrafica').style.display = 'none';
document.getElementById('multiselectForm').style.display = 'none';
} else if (val == anagrafica) {
document.getElementById('multiselectUsers').style.display = 'none';
document.getElementById('multiselectAnagrafica').style.display = 'inline-block';
document.getElementById('multiselectForm').style.display = 'none';
} else if (val == form){
document.getElementById('multiselectUsers').style.display = 'none';
document.getElementById('multiselectAnagrafica').style.display = 'none';
document.getElementById('multiselectForm').style.display = 'inline-block';
}
}
</script>
</html>
adding alert (val); inside each if, I see that changing the selection, the alert appears with the correct value, so I assume that the problem is related to how I tell him to change the style.display, but I do not understand what is wrong
you use getElementById, but you don't have any tag with corresponding ID (only CSS classnames). You should replace your class attributes in div tags with id (and also update the CSS, replacing . by #.
Related
Hello everybody I have this code that I have made alone.
function appearafter() {
document.getElementById("buttonappear").style.display = "block";
document.getElementById("button").style.display = "block";
document.getElementById("hinzufuegen").style.display = "none";
function myFunction() {
var itm = document.getElementById("myList2").lastChild;
var cln = itm.cloneNode(true);
document.getElementById("myList1").appendChild(cln);
}
function allFunction() {
myFunction();
appearafter();
}
#button {
display: none;
}
#buttonappear {
display: none;
}
#test {
width: 300px;
height: 300px;
background-color: red;
}
<!DOCTYPE html>
<html>
<body>
<button id="hinzufuegen" onclick="allFunction()">ADD</button>
<div id="myList1">
<button id="button" onclick="">DELETE</button>
<div id="myList2">
<div id="test">
</div>
</div>
</div>
<button onclick="allFunction()" id="buttonappear">ADD</button>
</body>
</html>
What I want to make is that the red square whenever you are clicking on the ADD button it will be a clone and when you click on the DELETED button that the clone is deleted. Can somebody help me, please?
In addition to missing } as was mentioned in the comments, there was a not-so-obvious problem with finding the <div> to clone. The lastChild was actually a text node containing the \n (newline), after the <div>. It's better to search for <div> by tag:
var itm = document
.getElementById('myList2')
.getElementsByTagName('div')[0];
Since there's only one <div> we can use the zero index to find this first and only one.
And for delete function you can use a similar approach and get the last <div> and remove it.
function appearafter() {
document.getElementById("buttonappear").style.display = "block";
document.getElementById("button").style.display = "block";
document.getElementById("hinzufuegen").style.display = "none";
}
function myFunction() {
var itm = document.getElementById("myList2").getElementsByTagName("div")[0];
var cln = itm.cloneNode(true);
document.getElementById("myList1").appendChild(cln);
}
function deleteFunction() {
var list1 = document.getElementById("myList1");
var divs = Array.from(list1.getElementsByTagName("div"));
// If the number of divs is 3, it means we're removing the last
// cloned div, hide the delete button.
if (divs.length === 3) {
document.getElementById("button").style.display = "none";
}
var lastDivToDelete = divs[divs.length - 1];
list1.removeChild(lastDivToDelete);
}
function allFunction() {
myFunction();
appearafter();
}
#button {
display: none;
}
#buttonappear {
display: none;
}
#test {
/* make it smaller so it's easier to show in a snippet */
width: 30px;
height: 30px;
background-color: red;
}
<button id="hinzufuegen" onclick="allFunction()">ADD</button>
<div id="myList1">
<button id="button" onclick="deleteFunction()">DELETE</button>
<div id="myList2">
<div id="test"></div>
</div>
</div>
<button onclick="allFunction()" id="buttonappear">ADD</button>
This is a simple drop-down menu with input in HTML and pure javascript (no JQuery). I don't want to use the pre-defined HTML list with option tags because i need scroll bars, styling etc.
I hide the list onblur but this event gets triggered before the click on the items list. So the result is that I cant click on the items of the drop-down menu because the list gets hidden before hand.
This is the code:
function showList(){
elem = document.getElementById("list");
elem.className = "unhidden";
}
function hideList(){
elem = document.getElementById("list");
elem.className = "hidden";
}
function showSuccess(){
elem = document.getElementById("successDiv");
elem.innerHTML = "code successful!";
}
.hidden { display: none; }
.unhidden { display: block; }
<html>
<head>
</head>
<body>
<input onfocus="showList();" onblur="hideList();"/>
<div id="list" class="hidden">
click for success
</div>
<div id="successDiv">
</div>
</body>
</html>
The easiest solution is to add a small delay with setTimeout before hiding the element. In the example below i wait a 250 milliseconds before removing the class.
function showList(){
elem = document.getElementById("list");
elem.className = "unhidden";
}
function hideList(){
setTimeout(function() {
elem = document.getElementById("list");
elem.className = "hidden";
}, 250); // Wait 250 milliseconds
}
function showSuccess(){
elem = document.getElementById("successDiv");
elem.innerHTML = "code successful!";
}
.hidden { display: none; }
.unhidden { display: block; }
<html>
<head>
</head>
<body>
<input onfocus="showList();" onblur="hideList();"/>
<div id="list" class="hidden">
click for success
</div>
<div id="successDiv">
</div>
</body>
</html>
EDIT: More robust solution
You can look at the events relatedTarget and if it is inside the list dont close it before clicking on it.
const input = document.querySelector("#input");
const list = document.querySelector("#list");
const listItems = document.querySelectorAll("#list a");
const success = document.querySelector("#successDiv");
input.addEventListener("focus", showList);
input.addEventListener("blur", hideList);
for(const listItem of listItems) {
listItem.addEventListener("click", showSuccess);
}
function showList() {
list.classList.remove("hidden");
}
function hideList(event) {
if(event.relatedTarget?.parentNode !== list) {
list.classList.add("hidden");
}
}
function showSuccess(event) {
success.innerHTML = "code successful!";
// Remove line to keep list open
hideList(event);
}
#list {
display: flex;
flex-direction: column;
}
#list.hidden { display: none; }
<input id="input" />
<div id="list" class="hidden">
click for success
click for more success
click for even more success
</div>
<div id="successDiv">
</div>
I need your help,
How can I re-minimize (set the textarea's class back to normal) when I reclick on the button "expand"
I can get it to work, but just not the other way around.
Here is my HTML + Javascript
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.normal {
width: 400px;
height: 25px;
}
.expand {
height: 400px;
width: 400px;
}
</style>
<script type="text/javascript">
function expand() {
document.getElementById('subject_area').className = "expand"
document.getElementById('expand').value = "minimize"
}
</script>
</head>
<body>
<input class="normal" id="subject_area" type="textarea" >
<input id="expand" type="button" value="expand" onclick="expand()">
</body>
</html>
You can do:
var subject = document.getElementById('subject_area');
var btnExpand = document.getElementById('expand');
subject.className == "expand" ? subject.className = "normal" : subject.className = "expand";
btnExpand.value == "minimize" ? btnExpand.value = "expand" : btnExpand.value = "minimize";
var subject = document.getElementById('subject_area');
var button = document.getElementById('expand');
function expand() {
if (subject.className === 'normal') {
subject.className = 'expand';
button.value = 'minimize';
} else {
subject.className = 'normal';
button.value = 'expand';
}
}
Fiddle here: http://jsfiddle.net/ToddT/aPqgh/
I'm trying to create a simple image gallery with radio buttons. Images are set to Display: none; by default. What I want is for them to display as block when I click on their respective buttons.
<html>
<head>
<style>
.img { width: 250px;
max-height: 300px;
display: none;
}
</style>
<script>
function picture (a) {
var pic = document.getElementById('image')
if (a == 1) {
pic.src="julia1.jpg"
} else { pic.src="julia2.jpg"}
pic.style.display ="block";
}
</script>
</head>
<body>
<img class="img" id="image" src="julia1.jpg">
<form action="">
<input type="radio" onclick="picture(1)" name="picture"></input>
<input type="radio" onclick="picture(2)" name="picture"></input>
</form>
</body>
</html>
On the browser console it says that object is not a function. What does that mean? (thats for both input tags)
The last line should read
pic.style.display = "block";
If anyone looking for simple js gallery check this example :
https://codepen.io/zarokr/pen/ZEzBYvY
let current = document.getElementById('current');
let thumbnails = document.getElementsByClassName('thumb');
for(let i = 0; i<thumbnails.length; i++){
thumbnails[i].addEventListener('click',changeImage);
}
function changeImage(){
let getsrc = this.getAttribute('src');
current.setAttribute('src',getsrc);
}
I am trying to use a link to clear a text input field. I am hiding and showing a memo field and and if the user puts text in the field and clicks "remove memo" link I want to text field to clear on click.
<html>
<head>
<script language="JavaScript">
function toggle(id) {
var state = document.getElementById(id).style.display;
if (state == 'block') {
document.getElementById(id).style.display = 'none';
} else {
document.getElementById(id).style.display = 'block';
}
}
oldTextAry = new Array();
function changeText (fieldObj, newTexStr) {
if (newTexStr == fieldObj.innerHTML) {
fieldObj.innerHTML = oldTextAry[fieldObj.id];
} else {
oldTextAry[fieldObj.id] = fieldObj.innerHTML;
fieldObj.innerHTML = newTexStr;
}
}
</script>
<style type="text/css">
<!--
#hidden1 {display: none;}
-->
</style>
</head>
<body>
<a href="###" onclick="toggle('hidden1'); changeText(this,'Remove Memo');" class="memo" >Add Memo</a>
</div>
<div id="hidden1"><div class="memo">Memo: <input type="text" id="ctlWorkflow_ctlMemo381" size="45" maxlength="32" name="ctlWorkflow:ctlMemo381"></div> </div>
</body>
</html>
I am stuck and cannot get the field to clear.
Use the below code in the click delegate. Sorry for the mistaken answer.
document.getElementById("ctlWorkflow_ctlMemo381").value = '';
Cheers