this is the javascript code
<script type="text/javascript">
function divHDVisible(){
var div = document.getElementById('linkHD');
div.style.visibility = 'visible';
}
</script>
and this is the jsp code
<font size="-2">
<%=dataJobs.getID_Harware_Use()%>
</font>
<div class="row" id="linkHD" style="visibility: hidden;">Success</div>
what i want is get the value of <%=dataJobs.getID_Harware_Use()%> inside the div(div id=linkHD)
can any one help me?
Try this:
function divHDVisible(elem) {
var div = document.getElementById('linkHD');
div.style.visibility = 'visible';
div.innerHTML = elem.innerHTML;
}
<font size="-2"><%=dataJobs.getID_Harware_Use()%></font>
<div class="row" id="linkHD" style="visibility: hidden;">Success</div>
Related
I have some html like this:
<html>
<body>
<div>
<p>Something</p>
</div>
<div class="hide" id="show">Protected</div>
</body>
</html>
I need to display or hide/show an element via JavaScipt if html has "Something" in its text. How can I do that? I need this for my Wordpress page.
Without using jQuery:
var content = document.body.textContent || document.body.innerText;
var hasText = content.indexOf("Something")!==-1;
if (hasText) {
document.getElementById("show").style.display = 'block';
} else {
document.getElementById("show").style.display = 'none';
}
I cannot work out why, when I click 'x', the modal box/pop up will not close. It is completely unresponsive.
Here is the JavaScript:
var kite = document.getElementById("poptext");
var kitetwo = document.getElementById("poptexttwo");
var closebtn = document.getElementById("close");
function seltst() {
var kite = document.getElementById("poptext");
var closebtn = document.getElementById("close");
kite.style.display = 'block';
setTimeout(el, 2000);
kite.style.width = "500px";
}
function el() {
kite.style.display = 'block';
}
function closepop() {
kite.style.display = "none";
}
and here is the HTML:
<p>
<input readonly type="text" value="a random value" id="tbox" onselect="seltst()">
</p>
<div id="poptextcont">
<div id="poptext">
<span id="close" onclick="closepop()">×</span>
<p id="poptexttwo">
lots of text about stuffContact us more text!
</p>
</div>
</div>
Answers only in pure JavaScript please.
Lots of redundant code, after clean up this is what you got:
On click hide poptext, on select (highlight) show poptext
ALSO: make sure your script is just before </body> and must after all other html, in my example if you move the script above p will not work, why?
Because when page load you are calling var kite = document.getElementById("poptext"); but the element is not loaded yet.
<p>
<input readonly type="text" value="a random value" id="tbox" onselect="seltst()">
</p>
<div id="poptextcont">
<div id="poptext">
<span id="close" onclick="closepop()">×</span>
<p id="poptexttwo">
lots of text about stuffContact us more text!
</p>
</div>
</div>
<script>
var kite = document.getElementById("poptext");
function seltst() {
kite.style.display = 'block';
kite.style.width = "500px";
}
function closepop() {
kite.style.display = "none";
}
</script>
But if you do this will work, you define kite inside the function, so when the function is called (the element already loaded):
<script>
function seltst() {
var kite = document.getElementById("poptext");
kite.style.display = 'block';
kite.style.width = "500px";
}
function closepop() {
var kite = document.getElementById("poptext");
kite.style.display = "none";
}
</script>
<p>
<input readonly type="text" value="a random value" id="tbox" onselect="seltst()">
</p>
<div id="poptextcont">
<div id="poptext">
<span id="close" onclick="closepop()">×</span>
<p id="poptexttwo">
lots of text about stuffContact us more text!
</p>
</div>
</div>
Your kite variable is defined at the global scope, however not defined in the function you're trying to call. Normally that would be fine, however, it seems it is declared before the DOM has loaded.
Redeclare that variable within the closePop function and you will be fine.
function closepop() {
var kite = document.getElementById("poptext");
kite.style.display = "none";
}
<!DOCTYPE html>
<html>
<head>
<title>Business Card</title>
<script type="text/javascript">
window.onload = init;
function init(){
var button = document.getElementById("populateFields");
button.onclick = updateFields;
}
function updateFields(){
document.getElementById("businessCard").innerHTML = "Business Card Info";
document.getElementById("name").innerHTML = "Name";
}
</script>
</head>
<body>
<div id="businessCard">
<div id="name"></div>
</div>
<input type="button" value="populate fields" id="populateFields">
</body>
</html>
I can see div with id, 'businessCard' updated with "Business Card Info" but, I the div inside that with id 'name' is not getting updated.
innerHTML on outer div clears out your inner div . save the inner div before using innerHTML on outer div.
window.onload = init;
function init() {
var button = document.getElementById("populateFields");
button.onclick = updateFields;
}
function updateFields() {
//save inner div
var innerdiv = document.getElementById("name");
innerdiv.innerHTML = "Name";
var outerdiv = document.getElementById("businessCard");
outerdiv.innerHTML = "Business Card Info";
// add inner div back
outerdiv.appendChild(innerdiv);
}
<div id="businessCard">sme
<div id="name">fdfdf</div>
</div>
<input type="button" value="populate fields" id="populateFields">
Since some say innerHTML is evil because of it's consequences in DOM. Another solution is to use .firstChild.nodeValue.
window.onload = init;
function init() {
var button = document.getElementById("populateFields");
button.onclick = updateFields;
}
function updateFields() {
document.getElementById("businessCard").firstChild.nodeValue = "Business Card Info";
document.getElementById("name").firstChild.nodeValue = "Name";
}
<div id="businessCard">
<div id="name"> </div>
</div>
<input type="button" value="populate fields" id="populateFields">
I am trying to hide the div's when different buttons are clicked but I don't know how to. (So when 'Test 1' is clicked it should hide 'Test 2' Div and vice versa) I checked here and on Google but couldn't find an answer for it.
Javascript :
function showHide(divId) {
var theDiv = document.getElementById(divId);
if (theDiv.style.display == "none") {
theDiv.style.display = "";
} else {
theDiv.style.display = "none";
}
}
HTML :
<input type="button" onclick="showHide('hidethis')" value="Test It">
<div id="hidethis" style="display:none">
<h1>TEST ME!</h1>>
</div>
<input type="button" onclick="showHide('hidethis2')" value="Test It 2">
<div id="hidethis2" style="display:none">
<h1>TEST MEEEEEEEEEEEEEEE 2!</h1>
</div>
JSFIDDLE: is not doing it here but works locallyhttp://jsfiddle.net/S5JzK/
<input type="button" onclick="showHide('hidethis')" value="Test It" />
<div id="hidethis" style="display:none">
<h1>TEST ME!</h1>
</div>
<input type="button" onclick="showHide('hidethis2')" value="Test It 2">
<div id="hidethis2" style="display:none">
<h1>TEST MEEEEEEEEEEEEEEE 2!</h1>
</div>
function showHide(divId) {
$("#"+divId).toggle();
}
Check the Fiddle http://jsfiddle.net/S5JzK/7/
Please try this, it works well and so simple,
<html>
<head>
<style>
.manageDiv{
display:none;
}
</style>
</head>
<body>
<input type="button" class="testButton" value="Test It" />
<input type="button" class="testButton" value="Test It 2" />
<div id="hidethis2" class="manageDiv">
<h1>TEST MEEEEEEEEEEEEEEE 2!</h1>
</div>
</body>
</html>
$(function(){
$(".testButton").on("click", function(){
$("#hidethis2").toggleClass("manageDiv");
});
});
To it work in fiddle, in your example, you need to select (No wrap - in head) on the left.
Look the example below, using pure javascript:
HTML
<input type="button" onclick="showHide('hidethis')" value="Test It">
<div id="hidethis" style="display:none">
<h1>TEST ME!</h1>
</div>
<input type="button" onclick="showHide('hidethis2')" value="Test It 2">
<div id="hidethis2" style="display:none">
<h1>TEST MEEEEEEEEEEEEEEE 2!</h1>
</div>
JAVASCRIPT
function showHide(divId) {
/* Hide all divs */
var elements = document.getElementsByTagName('div');
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = "none";
}
/* Set display */
var theDiv = document.getElementById(divId);
theDiv.style.display = "";
}
http://jsfiddle.net/S5JzK/9/
ANOTHER JAVASCRIPT EXAMPLE
function showHide(divId) {
/* Hide the divs that you want */
var div1 = document.getElementById('#hidethis');
var div2 = document.getElementById('#hidethis2');
div1.style.display = "none";
div2.style.display = "none";
/* Set display */
var theDiv = document.getElementById(divId);
theDiv.style.display = "";
}
Using JQuery:
function showHideDiv(divId, bShow) {
if (bShow) {
$("#" + divId).show();
} else {
$("#" + divId).hide();
}
}
your code seems fine. are you sure you enter the function upon click? try adding a breakpoint using developer tools or an alert.
Anyways, I see you tagged this post with jquery. you can you it to do the task more elegantly.
$("#" + theDiv).hide();
or for showing it:
$("#" + theDiv).show();
"JSFIDDLE: is not doing it here but works locally"
Yes, because by default jsfiddle wraps your JS in an onload handler, which means the function declaration is local to that handler. Inline html attribute event handlers like your onclick="showHide('hidethis')" can only call global functions.
Under jsfiddle's Frameworks & Extensions heading there's a drop-down where you can change the default "onload" to "No wrap - in head" (or "No wrap - in body"). That'll make your function declaration global as in your local implementation.
Demo: http://jsfiddle.net/S5JzK/8/
I am trying to pass a string to the onclick value of a div and it's just not working, have tried a million ways of doing it and this is what I have at the moment. I have tried passing different strings, plain text etc.. but nothing seems to be placed in the onclick value.
script:
function openPopup(imgname) {
document.getElementById('popup').style.display = 'block';
document.getElementById('delimg').src = 'imgstore/' + imgname;
document.getElementById('confirm').onclick = 'location.href=\'nextpage.php\'\;';
}
function closePopup() {
document.getElementById('popup').style.display = 'none';
}
and my div:
<div id="confirm" style="top:220px; left:100px;" class="yesnobutton" onclick="">
YES
</div>
I've looked on this site and I can't find a solution anywhere..thanks!
edit (ive moved the script below the div.. still not doing anything :( ):
<div id='popup' class='popup' style='display:none'>
<h5>Are you sure you wish delete this ad?</h5>
<div style='height:96px; width:128px; border:1px solid black; top:70px; left:50px; position:absolute;'>
<img id='delimg' src="" style='max-height:96px; max-width:128px;'>
</div>
<br>
<div id='confirm' style='top:220px; left:100px;' class='yesnobutton' onclick=''>
YES
</div>
<div style='top:220px; right:100px;' class='yesnobutton' onClick='closePopup()'>
NO
</div>
</div>
<script type='text/javascript'>
function openPopup(imgname) {
document.getElementById('popup').style.display = 'block';
document.getElementById('delimg').src = 'imgstore/' + imgname;
document.getElementById('confirm').onclick = 'location.href=\'newurl.html\'\;';
}
function closePopup() {
document.getElementById('popup').style.display = 'none';
}
</script>
Try to set a function to the onclick attribute.
<body>
<div id="confirm" style="top:220px; left:100px;" class="yesnobutton" onclick="">
YES
</div>
<script>
document.getElementById('confirm').onclick = function() {
location.href = 'nextpage.php';
}
</script>
</body>