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
Related
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 #.
I'm trying to figure out how I can make a targeted element disappear. If you click any where that is outside of that element. I have created a toggle effect with a button but I want to also hide id ex if there is any clicks outside of ex. I have
found working sources on this subject but it's based on jQuery most of the time. I have nothing against jQuery I just need to do this in pure JS structure for
personal reasons.
<!DOCTYPE html>
<html>
<head>
<style>
#ex{
display: none;
}
</style>
<script>
document.addEventListener('DOMContentLoaded',function(){
var b= document.getElementsByTagName('button')[0];
b.addEventListener('click',fx);
function fx() {
var x = document.getElementById("ex");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
});
</script>
</head>
<body>
<button>Toggle</button>
<h1 id="ex">Blablablablabla bla bla JS</h1>
</body>
</html>
UPDATE
Any time I tried to ask this question on this topic on many sites nobody never understand what I mean. In other words I don't want the body to do any toggling just the button the best way I can explain this is like this you know how in some applications if you click on a drop down menu and you click out side of that drop down menu then it disappears but you can use the navigation bar button to bring it back? That's what i'm trying to do .
I want something like this but in pure JS structure.
<style>
#ex{
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#ex').click(function(execute){
execute.stopPropagation();
});
$('button').click(function(execute) {
execute.preventDefault();
execute.stopPropagation();
$('#ex').toggle();
});
$(document).click(function() {
$('#ex').hide();
});
});
</script>
<button>Toggle</button>
<h1 id='ex'>Blablablablabla bla bla JS</h1>
<!DOCTYPE html>
<html>
<head>
<style>
#ex{
display: none;
}
</style>
<script>
document.addEventListener("click", function(obj){
var x = document.getElementById("ex");
if(obj.target.id != "ex") {
if (x.style.display === "block") {
x.style.display = "none";
} else if(obj.target.id == "btn") {
x.style.display = "block";
}
}
});
</script>
</head>
<body>
<button id="btn">Toggle</button>
<h1 id="ex">Blablablablabla bla bla JS</h1>
</body>
</html>
Update
You can save the button id and compare it with the clicked element id.
var b= document.getElementsByTagName('button')[0];
var btnId = b.getAttribute('id');
document.addEventListener('click',fx);
function fx(e) {
var x = document.getElementById("ex");
if (e.target.getAttribute('id') == btnId) {
if(x.style.display == "block")
x.style.display = "none";
else
x.style.display = "block";
}
else{ // we did not click on button
if (e.target.getAttribute('id') != 'ex')
x.style.display = 'none';
}
}
I am trying to use checkboxes and a submit button to toggle hide/show a section of my resume. I have two sections, education and work experience. I have the code to set up the checkboxes and submit button but I am not sure how to code what comes after it to make the checkboxes work. this is what I have:
<script>
function validateCheckbox() {
var checkbox = document.getElementsByName("c1");
for (var i=0; i < checkbox.length; i++) {
if (radios[i].checked) {
return true;
}
}
function myFunction() {
var x = document.getElementById("workexperience");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
I want to toggle the visibility of an element by id in CSS and I want to have the information be hidden upon page load so that if a site visitor clicks on the checkbox that says work experience and then hits the submit button it will show the relevant section either education for one checkbox or work experience for the other.
HTML
<div id="wrapper">
<div>
<input type="radio" name="resume" value="work-experience">
<input type="radio" name="resume" value="education">
<button type="button" id="view-resume">View</button>
</div>
<div id="work-experience" class="display-none">Work Experience</div>
<div id="education" class="display-none">Education</div>
</div>
CSS
<style type="text/css">
.display-none{
display: none;
}
</style>
JAVASCRIPT
<script type="text/javascript">
document.getElementById('view-resume').addEventListener("click", function(){
var resume = document.querySelector('input[name = "resume"]:checked').value;
document.getElementById(resume).style.display = 'block';
if(resume == 'work-experience'){
document.getElementById('education').style.display = 'none';
}else{
document.getElementById('work-experience').style.display = 'none';
}
});
</script>
I am trying to create a comment box where on each submit a new is dynamically created. The inner elements of the <div> being 3 buttons Edit, Post, Cancel and a close icon(image). These are also dynamically created. I finally append them all together. The below code would generate something like the below image on two submits. The error I'm facing is that, whatever <div>'s close icon/button is clicked, always the last <div> is being affected. Here I tried to close 'Hi' but 'hello' is being affected.Also there is a duplication of the <div> on even comments.
Kindly help me correct these issues.
<!DOCTYPE html>
<html>
<head>
<title>Comment</title>
</head>
<body>
<textarea id="ta" rows="30" cols="30" readonly></textarea>
<br>
<input type="textbox" id="tb"></input><br>
<button onclick="add()">Submit</button><br>
<script type="text/javascript">
var newDiv="",i=1,ta="";
function add() {
i++;
ta=document.getElementById('ta');
newDiv = document.createElement("div");
newDiv.id = "d"+i;
newDiv.style.display="block";
newTa = document.createElement("input");
newTa.type="text"
newTa.id = "t"+i;
//newTa.readonly='true';
newTa.setAttribute("readOnly","true");
newTa.style.display="block";
newTa.onclick=function(){
newP.style.visibility="visible";
newImg.style.visibility="visible";
newBut1.style.visibility="visible";
newButt1.style.visibility="visible";
};
// document.querySelector('body').addEventListener('click', function(event) {
newP=document.createElement("BUTTON");
newP.id="p"+i;
newP.innerHTML="Edit";
newP.style.visibility="hidden";
newP.style.display="inline";
newP.onclick=function()
{
newTa.removeAttribute('readonly'); // only needed the first time
newTa.readOnly = false;
//newTa.setAttribute("readOnly","false");
//newTa.readonly='false';
//newP.innerHTML="wrng";
}
newImg=document.createElement("IMG");
newImg.id="i"+i;
newImg.src="http://www.freeiconspng.com/uploads/close-icon-30.png";
newImg.style.width="20%";
newImg.style.height="20%";
newImg.alt="close";
newImg.style.visibility="hidden";
newImg.style.display="inline";
newImg.onclick=function()
{
newDiv.innerHTML="";
//newDiv.remove();
}
newBut1=document.createElement("button");
newBut1.id="b"+i;
newBut1.innerHTML="Post";
newBut1.style.visibility="hidden";
newBut1.style.display="inline";
newBut1.onclick=function(){
//newTa.readonly='true';
newTa.setAttribute("readOnly","true");
}
newButt1=document.createElement("button");
newButt1.id="bt"+i;
newButt1.innerHTML="Cancel";
newButt1.style.visibility="hidden";
newButt1.onclick=function(){
newTa.value=document.getElementById('tb').value;
newTa.readonly='true';
}
newDiv.appendChild(newTa);
newDiv.appendChild(newP);
newDiv.appendChild(newImg);
newDiv.appendChild(newBut1);
newDiv.appendChild(newButt1);
var b=""
b="t"+i;
ta.appendChild(newDiv);
document.getElementById(b).value=document.getElementById('tb').value;
}
</script>
</body>
</html>
Try this code. I have changed textarea to div.
Initial i to 0 instead of 1. You can also set it to 1. It won't affect the functionality.
Some variables were global, I have changed them to local variable now like newDiv,newP, newImg etc.
<!DOCTYPE html>
<html>
<head>
<title>Comment</title>
</head>
<body>
<!--<textarea id="ta" rows="30" cols="30" readonly></textarea>-->
<div id="ta"></div>
<br>
<input type="textbox" id="tb"></input><br>
<button onclick="add()">Submit</button><br>
<script type="text/javascript">
var i=0,ta="";
function add() {
(function(){
i++;
var temp_i = i;
ta=document.getElementById('ta');
var newDiv = document.createElement("div");
newDiv.id = "d"+temp_i;
newDiv.style.display="block";
newTa = document.createElement("input");
newTa.type="text"
newTa.id = "t"+temp_i;
//newTa.readonly='true';
newTa.setAttribute("readOnly","true");
newTa.style.display="block";
newTa.onclick=function(){
console.log(temp_i);
console.log(i);
newP.style.visibility="visible";
newImg.style.visibility="visible";
newBut1.style.visibility="visible";
newButt1.style.visibility="visible";
};
// document.querySelector('body').addEventListener('click', function(event) {
var newP=document.createElement("BUTTON");
newP.id="p"+temp_i;
newP.innerHTML="Edit";
newP.style.visibility="hidden";
newP.style.display="inline";
newP.onclick=function()
{
newTa.removeAttribute('readonly'); // only needed the first time
newTa.readOnly = false;
//newTa.setAttribute("readOnly","false");
//newTa.readonly='false';
//newP.innerHTML="wrng";
}
var newImg=document.createElement("IMG");
newImg.id="i"+temp_i;
newImg.src="http://www.freeiconspng.com/uploads/close-icon-30.png";
newImg.style.width="20%";
newImg.style.height="20%";
newImg.alt="close";
newImg.style.visibility="hidden";
newImg.style.display="inline";
newImg.onclick=function()
{
newDiv.innerHTML="";
//newDiv.remove();
}
var newBut1=document.createElement("button");
newBut1.id="b"+temp_i;
newBut1.innerHTML="Post";
newBut1.style.visibility="hidden";
newBut1.style.display="inline";
newBut1.onclick=function(){
//newTa.readonly='true';
newTa.setAttribute("readOnly","true");
}
var newButt1=document.createElement("button");
newButt1.id="bt"+temp_i;
newButt1.innerHTML="Cancel";
newButt1.style.visibility="hidden";
newButt1.onclick=function(){
newTa.value=document.getElementById('tb').value;
newTa.readonly='true';
}
newDiv.appendChild(newTa);
newDiv.appendChild(newP);
newDiv.appendChild(newImg);
newDiv.appendChild(newBut1);
newDiv.appendChild(newButt1);
var b=""
b="t"+temp_i;
ta.appendChild(newDiv);
document.getElementById(b).value=document.getElementById('tb').value;
})();
}
</script>
</body>
</html>
Why not you use jquery to minimize your code campaign. Below is the code which will fix your problem.
<!DOCTYPE html>
<html>
<head>
<title>Comment</title>
</head>
<body>
<br>
<div class="container">
<input type="textbox" id="tb"><br>
<button>Edit</button><button>Post</button><button class="cancel">Cancel</button><br />
</div>
<button class="submit">Submit</button><br>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.submit').click(function() {
var element = '<div class="container">'+'<input type="textbox" id="tb"><br>'+
'<button>Edit</button><button>Post</button><button class="cancel">Cancel</button><br /></div>';
$('.submit').before(element);
});
$('body').delegate('.cancel', 'click', function() {
$(this).parent().remove();
});
});
</script>
</body>
</html>
Thanks
The below code snippet shows the invite code when I click "Invite Code". But how do I re-hide the invite code if the same link is clicked again? And can it be done where it cycles back and forth with subsequent clicks? I didn't write this code but merely modified it to my use. I am still very new to this type of thing. Thanks!
<style>
div.hide { display:none; }
div.show { text-align:center; }
</style>
<script type='text/javascript'>
function showText(show, hide) {
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
</script>
<br>
<font color="red">-</font>Home<font color="red"> / </font><a onclick="showText('text1')" href="javascript:void(0);">Invite Code</a>-</font>
<div id="text1" class="hide"><font color="red">abc123</font></div>
</center></h3>
Simply use this function:
function showText(id)
{
var elem = document.getElementById(id);
if(elem.style.display == 'none')
{
elem.style.display = 'inline';
}
else
{
elem.style.display = 'none';
}
}
<a onClick="showText('text1');" href="#">Show or Hide</a><br/>
<div style="height: 30px;"><div id="text1" style="display: none;">Text to hide or show... WTF?!</div></div>
<div>This text should not move.</div>
PS: This also works for 2 Elements...
Greetings
I really don't see the use for the show class. You could just toggle the hide class on the elements that you want to toggle.
Assume you dont need the show class, then use the classList.toggle function like this
function toggle(target){
document.getElementById(target).classList.toggle('hide');
}
.hide{ display:none }
<button onclick="toggle('test')">Show / Hide</button>
<div id="test" class="hide">Hello world!</div>
save the state with a boolean
var hided = true;
function showText(show,hide){
if (hided){
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
else{
document.getElementById(show).className = "hide";
document.getElementById(hide).className = "show";
}
hided = !hided;
}
fiddle with this code and some of your html : fiddle,
isn't it the expected behavior ?
<html>
<div ID="content" style="display:block;">This is content.</div>
<script type="text/javascript">
function toggleContent() {
// Get the DOM reference
var contentId = document.getElementById("content");
// Toggle
contentId.style.display == "block" ? contentId.style.display = "none" :
contentId.style.display = "block";
}
</script>
<button onclick="toggleContent()">Toggle</button>
</html>
//Code is pretty self explanatory.