We Keep Coding

Calling a value + style.display function?

I'm struggling to get this working because I don't know the right formatting.
What I am attempting is to get a CSS modal to display depending on what a user selects as a value in a Javascript applet.
The idea is to return .style.display = "block";
function onClick(event){
<something>.style.display = "block";
}
Where contains a value that has being saved in the format of intersects[0].object.title
So if for example I have selected "manhattan"
alert(intersects[0].object.title)
I'll get the string "manhattan" displaying correctly. That works perfectly.
But I can't get manhattan.style.display = "block"; returned and WORKING inside the function? I tried :
function onClick(event){
intersects[0].object.title.style.display = "block";
}
Also tried
function onClick(event){
(intersects[0].object.title).style.display = "block";
}
Any help would be greatly appreciated

This may not be directly what you're looking for, but it may help anyways. To make it work in your case, just change the button press to be a check for the selected value.
Rather than adjusting the CSS directly, this route modifies the element's classList to remove or add a .hidden class that contains the correct CSS.
// Loop through all modal buttons
document.querySelectorAll('.modal-button').forEach(function(element) {
// Add a click event listener to all modal buttons
element.addEventListener('click', function() {
// Toggle the target modal on click
toggleModal(element.dataset.target);
});
});
// Create the function to toggle the modals
function toggleModal(target) {
// Find the target
let targetElement = document.querySelector(target);
// Check if the target is hidden
if (targetElement.classList.contains('hidden')) {
// If it is, show it
targetElement.classList.remove('hidden');
} else {
// If it isn't, hide it
targetElement.classList.add('hidden');
}
}
.hidden {
display: none;
}
<button data-target="#modal" class="modal-button">Toggle Modal</button>
<div id="modal" class="hidden">Hey there, I'm a modal!</div>

I'm not certain from your question how the pieces of your puzzle are related to one another, and it would be helpful if you could clarify by showing more of your HTML and Javascript code, but I'll toss a couple of ideas at you in the meantime. Apologies if I'm telling you stuff you already know.
The only sort of object you would usually be able to set "style.display" on is an HTML element. To tell Javascript which HTML element you want to modify, you usually use a CSS selector like "document.getElementById('myDiv')"
It sounds like "manhattan" might be a piece of information you could use to uniquely identify the HTML element you intend to show. If so, there are four simple parts to showing the correct element:
associate the element with that particular string (eg via an id)
get the string at runtime (the same way as you did for the alert)
select the element based on the matching string
display the selected element
All together, it might look like this:
<div id="manhattan"></div>
<script>
var identifier = intersects[0].object.title;
alert(identifier) //I'm assuming this alerts "manhattan"
var elementToShow = document.getElementById(identifier);
elementToShow.style.display = "block";
</script>
Is this on the right track? If not, just provide more detail, and I'll see what else I can suggest.

Give to you div some id and then just change that:
<div id="test"></div>
document.getElementById("test").style["display"] = "block";
or
document.getElementById("test").style.display = "block";
or
document.getElementById("test").style.setProperty('display', 'block');
or
document.getElementById("test").setAttribute('display', 'block');

how i can visible textarea box using javascript

I'm making automation script in python using selenium so i want to visible textarea box because i want to put it into some arguments and i'm using this code:
element = driver.find_element_by_id('g-recaptcha-response')
driver.execute_script("arguments[0].style.display = '';", element)
driver.execute_script("arguments[0].style.margin = '100px 200px';", element)
but above code is not working for me as you can see here:
Could you please tell me how I can show textarea box? Link to the page.

arguments[0].style.display = 'block';
arguments[0].parentNode.parentNode.style.display = "block";
The problem is that setting style.display to an empty string is interpreted as setting the display to "none" and that makes the element invisible. The textarea also sits in a parent which sits in a parent with the styling "display: none" so to solve that just go to the parent of the parent and set its display to "block".

Add JavaScript onClick to dynamically generated asp button

Background My page creates a list of objects based on rows of an SQL Database. For each object, a DIV is dynamically generated that contains a few items including a LinkButton and a further child DIV that is initially hidden. I want the link button to toggle the child DIV's hidden property. The JavaScript is not dynamically generated and is included in the ASPX page.
Problem I don't know how to make this generated LinkButton fire JavaScript that is included in the ASPX page and pass in the correct DIV's ID.
I'm guessing I need to add an attribute to the button like so:
myButton.Attributes.Add(reference to JS function + parameter of DIV's ID)
Maybe like:
myButton.Attributes.Add("onclick", "Show_Hide_Display('"<%="' +idString+ '".ClientID%>"')");
Where the button is given an attribute of a JS onClick handler pointing to the function "Show_Hide_Display" and a parameter of a DIV's ID that is calculated as the rendered ID. This syntax is incorrect though.
How do I write this so it calls 'Show_Hide_Display' and passes the ID of the current child DIV? All of the DIVs have the same ID apart from a number that references their row number, for example '"myDiv_" + counter.ToString'
The JavaScript I am trying to add a call to on the button:
function Show_Hide_Display(divID) {
var div = document.getElementById(divID);
var style = document.defaultView.getComputedStyle(div);
var display = style.getPropertyValue('display');
if (display == '' || display == 'block') {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
}

Use the following syntax ...
myButton.Attributes.Add("onclick", "Show_Hide_Display(this.id);");
the above syntax allows to call the function with id as its parameter.
suggestion:
Try to write a common function which does not depend on generated ids of controls.
If this is not useful for your requirement, please post your code which might gives me a better idea.

If you are using jQuery, you could you jQuery delegate method.
$(document).on("click", "div.parent", function(){
var subDivId = getSubDivByParent(this);
Show_Hide_Display(subDivId);
};
You need to implement getSubDivByParent according your DOM structure.
If you are not using jQuery, you need to attach event yourself. For each dynamically generated element. You need to manually add following script in your server code to register event.
... your html code ...
<script>
var elem = document.getElementById('new-created-element');
elem.addEventListener("click", function(){
var subDivId = getSubDivByParent(this);
Show_Hide_Display(subDivId);
};)
</script>

My suggestion is use jquery to achieve the functionality.
My solution works if you want to toggle the immediate div for the link.just call onclientclick method to toggle the div.
in linkbutton onclientclick="Show_Hide_Display(this)"
function Show_Hide_Display(id) {
$(id).next('div').toggle();
}
I hope this helps you .. Thanks

getElementById doesn't find element after setting visibility to hidden

I'm working on an asp.net page, and I have a master page that uses a content page (my web control). In my web control, I have 4 elements. When I change the picklisttype drop down
PickListType - dropdown
UserPickList -not important
Organization - label
Body - label
Address -drop down
When I change the picklisttype dropdwon, I want to hide Body and Address, and vice versa.
When I change it hte first time, it works, but the second time, it says that it cannot find the ids of Body and Address (I set their visibility to hidden) the 2nd time. When looking through the source, it seems that these elements have 1) changed their Ids during the postback and .ClientId can't find them or 2) they just disappear.
I can't seem to figure out how to do this. Any ideas?
function DropDownChange() {
var picklist = document.getElementById("PickListTypeList");
var usercontainer = document.getElementById("ctl00_ctl00_ctl00_PageContentPlaceHolder_PageContentPlaceHolder_paneDetails_ApplicerPickListContainer");
var orgcontainer = document.getElementById("ctl00_ctl00_ctl00_PageContentPlaceHolder__C_OrganizationPickListContainer");
var addresslabel = document.getElementById("LegalBodyAddressLabel");
var addressbox = document.getElementById("ctl00_ctl00_ctl00_PageContentPlaceHolder_PageContentPlaceHolder_paneDetails_ApplicantsRadDock_C_ApplicantsControl_AddEditApplicantDock_C_AddApplicantDock_C_LegalBodyAddressComboBox");
if(picklist.value.toLowerCase() === "sometext"){
usercontainer.style.display = "none";
orgcontainer.style.display = "inline";
addresslabel.visibility = "visible";
addressbox.style.display = "inline";
}
else{
usercontainer.style.display = "inline";
orgcontainer.style.display = "none";
addresslabel.visibility = "hidden";
addressbox.style.visiblity = "none";
}
}
This is the source: i use .ClientId to dynamically find the ids, but then I changed it to static (same id's every single time) and I still cannot seem to get address and label. I am finding these elements from the parent (master) page by going into the control (controlname.nameofelementID.ClientID).

2 ideas/options
Add a class to the controls you want to access, and then use document.getElementsByClassName to retrieve them. .NET will not change classes on html tags after a postback.
OR
Wrap them in a div/span that has an id, and then document.getElementById that wrapping tag and then access its firstChild. I would recommend not doing runat="server" for this wrapper

You've 2 ways to make it work:
Use class names (.net framework does not fiddle with this)
Generate the javascript ids (using ClientId) at runtime. Since there's a postback, this is the right thing to do. Something like: document.getElementById("<%=LegalBodyAddressLabel.ClientId%>");

visibility:collapse in javascript

I'm using Ultrawebgrid for my applcation:
I'm using a textarea for listing the errors in my application in the row template when the user clicks that particular row...
So I need to have
texarea when there are any errors..... otherwise when there are no errors i dont even
want the row_template to pop up..... I'm using IE6.
I'm checking if there are any errors using javascript.so I had to use the javascript event handler:: UltraWebGrid1_BeforeRowTemplateOpenHandler(gridName, rowId, templateId)
where in I write the statements given below:
document.getElementById("TextArea2").style.visibility="collapse"
inside the above event function
1) it's showing javascript error as
"Couldnot get the visibility property:Invalid Argument"
but the row template does not pop up....... only the error's coming....
2) Is there any code to block the row template when there are no errors.??
i mean no pop_up for no errors
What's the solution for this???

DISPLAY
Use display instead of visibility. This occupies no space in your document.
document.getElementById("TextArea2").style.display = 'none'; // Turn off
document.getElementById("TextArea2").style.display = 'inline'; // Turn on
VISIBILITY
document.getElementById("TextArea2").style.visibility="hidden"; // Turn off
document.getElementById("TextArea2").style.visibility="visible"; // Turn on
By using the above code textarea won't be visible, but there will be blank space in your document having the height and width of the textarea.
Also 'collapse' value is supported only in Internet Explorer 8

Try using:
document.getElementById("TextArea2").style.display = 'none';
and (to turn it back on again)
document.getElementById("TextArea2").style.display = 'block'; // or 'inline'

You want:
document.getElementById("TextArea2").style.visibility = "hidden";
"collapse" is not a valid value for the visibility property in IE6, as your error message indicates.
Alternatively as suggested by #tvanoffsen you could set the display property to "none". This has a slightly different effect - it will not take up any space if set to "display: none", whereas setting "visibility: hidden" still takes up space.

use visible and hidden for .style.visibility attribute not block and hidden.
it works.