Please tell me how to send div id as a parameter to javascript function onclick in a link of a page to open it via javascript. I want to send div id to open that particular link.
<a id="anchor22" href="http://www.friferie.dk/inspiration/%C3%98strig" onclick="MyFunction()>Ostrig</a>
<script type="text/javascript">
function MyFunction(anchor) {
document.getElementById('achor').click();
}
</script>
Use this way -
function myFunction(x) {
document.getElementById('showId').innerHTML = x.parentElement.id; // x.parentElement.id gets the parent div then its id value
}
<div id="div1">
Click Me <!-- pass this to the function -->
</div>
<br />Div's id: <span id="showId">
</span>
The above code was just for simplicity. For your sample code -
<div id="div1">
<a id="anchor22" href="http://www.friferie.dk/inspiration/%C3%98strig" onclick="MyFunction(this)>Ostrig</a>
</div>
<script type="text/javascript">
function MyFunction(anchor) {
alert(anchor.parentElement.id); // Will return div1
alert(anchor.id); // Will return anchor22
}
</script>
Related
Hello everyone im trying to get the id of a div through a function in javascript like this:
<div id="txtHint" onload="getId(this);"></div>
The function is located just before </body> tag of my html page
function getId(theId) {
var name = document.getElementById(theId);
}
In the body of my html page i have a button:
<button type="button" onclick="alert(getId())">get</button>
I receive an undefined alert on clicking
How do i get the div's id?
Anyone can help?
Though I don't know the use case of this, you can pass the id to the function and return that from the function:
function getId(theId) {
var name = document.getElementById(theId);
return name.id;
}
<div id="txtHint"></div>
<button type="button" onclick="alert(getId('txtHint'))">get</button>
Update: If you want to get all id's by tag, simple pass the tag to the function and get all the id's of those element:
function getId(el) {
var element = document.querySelectorAll(el);
var id = [...element].map(i=>i.id).filter(i=>i);
return id;
}
<div id="txtHint1">First</div>
<div id="txtHint2">Second</div>
<div id="txtHint3">Third</div>
<div id="txtHint4">Fourth</div>
<button type="button" onclick="alert(getId('div'))">get</button>
The way your functions is written the only way is to have global variable
var divId = null;
function getId(div) {
divId = div.id;
}
function getId() {
alert(divId);
}
And here is my suggetions on doing it
First way is to "mark" the div at onload event and get the id of it using this "mark"
function markDiv(thisDiv) {
thisDiv.classList.add('mark')
}
function getMarkedDiv() {
var div = document.querySelector('.mark');
alert(div.id);
}
<div id="Mark" onload="markDiv(this)" class="mark"></div>
<button onclick="getMarkedDiv()">button</button>
Another way is to wrap the button and the div inside one parent
function getMySiblingId(button) {
alert(button.parentElement.firstElementChild.id);
}
<div id="Parent">
<div id="Mark"></div>
<button onclick="getMySiblingId(this)">Button</button>
</div>
Or the easiest way is to wrap button inside the desired div
function getId(btn) {
alert(btn.parentElement.id);
}
<div id="Mark">
<button onclick="getId(this)">Click me</button>
</div>
<div id="Alice">
<button onclick="getId(this)">Click me</button>
</div>
<div id="Charlie">
<button onclick="getId(this)">Click me</button>
</div>
Of course in all this scenarios i didn't assume that you want to get ids of multiple divs
so i remade the code
function divField(theDivFieldId) {
var name = document.getElementById(theDivFieldId);
return name.id;
}
html
<div id="txtHint" onload="alert(divField(this));"></div>
and nothing happens
I want to configure a hyperlink to close/open its related div in asp.net. Basically, when a user clicks the sign X, the panel should be closed and the sign + should be appeared. When + is clicked, the panel should be showed again. I could not manage this and I believe my main problem is "document.getElementById('<%= lb_closePanel.ClientID %>').value" is coming as undefined. Here is the code until now. I appreciate for your helps!
<!DOCTYPE html>
....
<div class="appheader">
<h1 class="appheaderContent">Search for Client</h1>
<div id="checkBox"></div>
<div id="closePanel"><h2 id="lblClosePanel">Close Panel</h2>
<div id="xButton">
<asp:LinkButton onclientclick="CloseOpenPanel('Search')" runat="server" Text="X" style="text-decoration:none; color:white" ID="lb_closePanel"></asp:LinkButton>
</div>
</div>
</div>
<div class="app" id="Search">
...
<div>
...
</html>
<script type="text/javascript">
function CloseOpenPanel(obj) {
alert(document.getElementById('<%= lb_closePanel.ClientID %>').value); //here it comes undefined!!!!
if (document.getElementById('<%= lb_closePanel.ClientID %>').value == 'X') {
document.getElementById(obj).Visible = false;
lb_closePanel.Text = '+';
}
else {
document.getElementById(obj).Visible = true;
lb_closePanel.Text = 'X';
}
}
</script>
Your code is OK, just instead of the property value use innerHTML
alert(document.getElementById('<%= lb_closePanel.ClientID %>').innerHTML);
Instead of using .value, try using .innerHTML instead to get the text inside of your link button (rendered as an a tag)
I have an html file, in which, i want to edit the fields.
Following is my html code :
<body>
<div class= "table">
<div class = "thead">
<div class = "tr">
<div class = "td">ID</div>
<div class = "td">GROUP NAME</div>
<div class = "td">GROUP DESCRIPTION</div>
<div class = "td">IS ACTIVE</div>
<div class = "td"></div>
<div class = "td"></div>
</div>
</div>
<div class= "tbody">
<form class = "tr">
<div class = "td">1</div>
<div class = "td">hello</div>
<div class = "td">hwryou</div>
<div class = "td">y</div>
<div class = "td action" ><button type="button "onclick="edit(this);">edit</button> </div>
<form>
</div>
</div>
</body>
following is my javascript code :
<script language="javascript" type="text/javascript" src="serialize-0.2.min.js">
function edit(element){
var tr = jQuery(element).parent().parent();
if(!tr.hasClass("editing")) {
tr.addClass("editing");
tr.find("DIV.td").each(function(){
if(!jQuery(this).hasClass("action")){
var value = jQuery(this).text();
jQuery(this).text("");
jQuery(this).append('<input type="text" value="'+value+'" />');
} else {
jQuery(this).find("BUTTON").text("save");
}
});
} else {
tr.removeClass("editing");
tr.find("DIV.td").each(function(){
if(!jQuery(this).hasClass("action")){
var value = jQuery(this).find("INPUT").val();
jQuery(this).text(value);
jQuery(this).find("INPUT").remove();
} else{ jQuery(this).find("BUTTON").text("edit");
}}); }
}</script>
while creating the out put, when i click the edit button, it is showing the reference error edit is not defined.what may be reason for that?
updated :
i have an other requirement that, on clicking the save button, the changed content should be saved in the database.How can and where i should write the update query? also i required a delete button so that on clicking the delete button, an update command should run.HOw can i achieve this ?/
A script can be inline or external, it cannot be both.
The presence of the src attribute causes the text node children of the script node to be ignored.
If you want inline and external scripts, use two script elements.
<script src="serialize-0.2.min.js"></script>
<script>
function edit(element){
// etc
<script type="text/javascript" src="serialize-0.2.min.js"></script>
<script type="text/javascript">
function edit(element){
// Your Code
}
</script>
Try this.
In html I am having the following tags:
<span id=M26>2011-2012</span>
<div id=c26 STYLE="display:none">
<span id=M27>2012-2013</span>
<div id=c26 STYLE="display:none">
On Clicking on 2011-2012 or on 2012-2013 I want to set display property of div tag.
I am using the following Javascript code for this and I am calling the Javascript function in body tag. The output is showing style and display is not an object or property.
<script language="javascript">
function clickHnadler()
{
var xid= document.getElementsByTagName("span");
var xsp= xid[0].id;
alert("Span id is "+xsp);
if(xsp.charAt(0)=="M")
{
var oC = document.all("C"& xsp.substring(1,2));
if(oC.STYLE.display == "none")
{
oC.Style.Display = "";
}
else{
oC.Style.Display = "none";
}
}
}
</script>
use jquery:
you can pass in the function the element or the Id:
ex:
<span id=M26>2011-2012</span>
function clickHnadler(element)
{
var id = $(element > span).attr(id);
id[0] = 'c'; //not the nicest way, maybe use a replace or something like that
$(id).show(); //or $(id).css('display','list');
}
You may use clickHandler has following way,
function clickHandler(e) {
window.document.links[0].handleEvent(e);
}
You need to bind event spacifically to elements you want to handle click for. for more information please refer following link,
http://docs.oracle.com/cd/E19957-01/816-6409-10/evnt.htm#1009606
Based on what i understand from your question, I come up with this.
<script type="text/javascript" src="jquery1.8.js"></script>
<span id=M26>2011-2012</span>
<div id=c26 STYLE="display:none">
2011-2012 details</div>
<br />
<span id=M27>2012-2013</span>
<div id=c26 STYLE="display:none">
2012-2013 details
</div>
Following code is working fine for me IE but not working in Chrome.
i want to open the link in same page in HTML by java script
<SCRIPT LANGUAGE="javascript">
function clickHandler()
{
var xid= document.getElementsByTagName("span");
var xsp= xid[0].id;
if(xsp.charAt(0)=="M") {
var oC=document.getElementById("C"+xsp.substr(1));
if(oC.style.display=="none")
oC.style.display="";
else
oC.style.display="none";
}
}
</SCRIPT>
html code is as following
<html>
<BODY onClick = "clickHandler();">
<a href="javascript:void(0)">
<u><b><span id=M26>2011-2012</span></b></u>
</a>
<div id=c26 STYLE="display:none">
<a href="javascript:void(0)">
<u><b><span id=M27>2012-2013</span></b></u>
</a>
</div>
<div id=c27 STYLE="display:none">
</div>
</body>
</html>
You use a upperCase C inside the function, but the ID starts with a lowercase c
var oC=document.getElementById("C"+xsp.substr(1));
has to be
var oC=document.getElementById("c"+xsp.substr(1));
Requested modification(you must remove the onclick from the body-element)
<script>
document.onclick=function(e){
var _this=(window.event)//reference to the clicked element
? event.srcElement//IE
: e.target;//others
if(_this.id.match(/^M(\d+)$/)){//extract the number
try{
var oC=document.getElementById("c"+RegExp.$1);//target-element
oC.style.display=(oC.style.display=='none')//set the display
?''
:'none'
}catch(e){}
}
}
</script>