can't update a div inside another div element with innerHTML method? - javascript

<!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">

Related

How to add JavaScript to button where it will generate another button linking to another page?

i am trying to use JavaScript where i can click on a button and it will generate a button above it so for example i have the first button called add additional:
<a href"#"><button type="button">Add Additional</button></a>
When this button is clicked and it will generate another button where i want it to be displayed the below:
<td>
Name
</td>
<td>
<button type="button">Choose another thing</button>
</td>
and is it possible to repeat this process like generating more of the 2nd button "Choose Another thing"
i hope this ins't too confusing
I think you are looking for something like this!! Just add a script so that whenever you click on the button it will execute it and create more buttons.
<!DOCTYPE html>
<html>
<body>
<p>Click the "Add Additional" button to create a BUTTON element with a "Choose Another Thing" text.</p>
<button onclick="myFunction()" type="button">Add Additional</button>
<script>
function myFunction() {
var x = document.createElement("BUTTON");
var t = document.createTextNode("Choose another thing");
x.appendChild(t);
document.body.appendChild(x);
}
</script>
</body>
</html>
I think this is the elegant way.
function appendButton(textContent, selector) {
var button = document.createElement('button');
button.classList.add('any');
button.innerHTML = textContent;
var selectedElement = document.querySelector(selector);
return selectedElement.appendChild(button);
}
// Call this function from wherever u like
// appendButton('click here', '.container');
<div class="container">
<button onclick="appendButton('click here', '.container')">
Click me
</button>
</div>
Run this you will get your solution
<html>
<head>
<script type="text/javascript">
function myFunction()
{
var a=document.createElement("a");
a.setAttribute("href","secondpage.html");
var btn=document.createElement("BUTTON");
var text=document.createTextNode("Choose another thing");
btn.appendChild(text);
a.appendChild(btn);
document.body.appendChild(a);
}
</script>
</head>
<body>
<a href"#"><button type="button" onclick="myFunction()">Add
Additional</button></a>
</body>
</html>
Give an id/class for a division append to it.
<div id='my_id' >
<td>Name</td>
<td><button>click</button></td>
</div>
When you click on addMore button write a function to append it to my_id
function onclickforaddbutton(){
id = document.getElementById('my_id');
var data = prompt("Enter something"); //where you can get data from user
id.innerHTML+="<td>"+data+"</td><td><button>Something</button></td>";
}
You need to first decide (container) where to add a new row. Then on click of add button, you can create a row with two columns, for the name and the new button, and append that row as a child of the container.
Here's how you can do it.
var count = 1;
var name = 'Generated Name';
function addNewRow() {
var container = document.getElementById('container');
var newRow = document.createElement('tr');
newRow.innerHTML = "<td>" + name + (count++) + "</td><td><button>Choose another thing</button></td>"
container.appendChild(newRow);
}
<html>
<head></head>
<body>
<div style="padding: 2rem;">
<table id="container">
</table>
</div>
<button onclick="addNewRow();">Add Additional</button>
</body>
</html>

Closing modal /popup box will not work

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";
}

Get value from link using onClick function in same page

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>

undefined subroutine &main::ThrowTemplateError

following is my template code :
<html>
<head>
<style>
.table
{
display:table;
border-collapse:separate;
border-spacing:2px;
}
.thead
{
display:table-header-group;
color:white;
font-weight:bold;
background-color:grey;
}
.tbody
{
display:table-row-group;
}
.tr
{
display:table-row;
}
.td
{
display:table-cell;
border:1px solid black;
padding:1px;
}
.tr.editing .td INPUT
width:100px;
}
</style>
<script type = "text/javascript" src = "jquery.min.js"></script>
<script>
var counter = 0;
var txt1 = "group_save";
function addNew() {
// Get the main Div in which all the other divs will be added
var mainContainer = document.getElementById('mainContainer');
// Create a new div for holding text and button input elements
var newDiv = document.createElement('div');
// Create a new text input
var newText = document.createElement('input');
newText.type = "input";
newText.name = txt1+counter;
//newText.value = counter;
// Create a new button input
var newDelButton = document.createElement('input');
newDelButton.type = "button";
newDelButton.value = "Delete";
// Append new text input to the newDiv
newDiv.appendChild(newText);
// Append new button input to the newDiv
newDiv.appendChild(newDelButton);
// Append newDiv input to the mainContainer div
mainContainer.appendChild(newDiv);
counter++;
// Add a handler to button for deleting the newDiv from the mainContainer
newDelButton.onclick = function() {
mainContainer.removeChild(newDiv);
}
}
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 value1 = jQuery(this).find("INPUT").val();
alert(value1);
jQuery(this).text(value1);
jQuery(this).find("INPUT").remove();
} else {
jQuery(this).find("BUTTON").text("edit");
}
});
}
}
</script>
</head>
<body >
<form name="group" method="post" action="process.cgi">
<div id="mainContainer">
<div><input type="button" value="Add" onClick="addNew()"></div>
</div>
<div><input type = "submit" value = "Save"></div>
</form>
[% IF count > 0%]
<b>Details of Groups</b><br>
<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>
</div>
<div class= "tbody">
[%- SET i = 0;
WHILE i < id.size; -%]
<form class = "tr">
<div class = "td"> [% id.$i %]<br/></div>
<div class = "td"> [% group_name.$i %]<br/></div>
<div class = "td"> [% group_desc.$i %]<br/></div>
<div class = "td">[% actv.$i %]<br/></div>
<div class = "td action" ><button type="button" onclick="edit(this);">edit</button> </div>
<form>
[%- SET i = i + 1;
END -%]
</div>
</body>
</html>
while i run my cgi code, i got the following template error.i checked my code and didn't find that evident, which gives the error.could any one please help me track this error.so that, i can go with the rest of the modifications in the file.that is i want to save the changed content in the database.???
updated :
error ---
Undefined subroutine &main::ThrowTemplateError called at /var/www/html/centralbugzilla/groups.cgi line 24.
line no 24 is : $template->process("list/group.html.tmpl",$vars)
|| ThrowTemplateError($template->error());
Firstly, you shouldn't assume that people will just know which templating system you are using. It looks to me like you are using the Template Toolkit, but there are many template engines for Perl.
Secondly, the template is a complete red herring here. The problem is in your Perl code. When the template can't be processed successfully, your code calls a function called ThrowTemplateError, but Perl can't find that function anywhere. Where is that function defined?
(Ok, I suppose it could look like the problem is in your template and not the code. There's some error in your template which means that TT can't process it and therefore the missing function is called. So fixing the error in your template will mean that the missing function no longer gets called. But it's still missing. And it will be a problem again the next time you accidentally break your template. So best to fix it now, I think.)

dynamicall add p element on mouse click using javascript

I need a code to display some message on every onclick event of a button using JavaScript
enter code here
<!DOCTYPE>
<html>
<head>
<script>
function addElement() {
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value -1)+ 2;
numi.value = num;
var newdiv = document.createElement('div');
var divIdName = 'my'+num+'Div';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML = 'Element Number '+num+' has been added! <a href=\'#\' onclick=\'removeElement('+divIdName+')\'>Remove the div "'+divIdName+'"</a>';
ni.appendChild(newdiv);
}
</script>
</head>
<body>
<div id='myDiv'>
<input type="button" value="click" onclick="addelement()">
<p id='theValue'></p>
</div>
</body>
</html>
check your function name
replace this
onclick="addElement()"

Categories

Resources