Element appending with and without scroll varies

Element appending with and without scroll varies - javascript

I have 2 button, one in top another in the bottom. when I click the top button it works fine. when i scroll down to bottom button and click the button again ( same function ) it appends the element with some where. I am calculating the top position from absolute way. getting the relation ship with body.
so how to handle this kind of scenario?
Live demo
Js code :
const h1All = document.getElementsByTagName("h1");
function addElement() {
let div = document.createElement('div');
div.innerText = "I am here";
div.style.border = "1px solid green";
div.style.position = "absolute";
let h1 = h1All[0];
h1.style.border = "1px solid red";
let parentPos = h1.getBoundingClientRect();
console.log(parentPos)
document.body.appendChild(div);
div.style.top = parentPos.y + parentPos.height + "px";
}
HTML:
<h1>Hello Plunker!</h1>
<div class="mydiv">some div info goes here
<button onclick="addElement()">Click Me </button> //works fine.
</div>
<button onclick="addElement()">Click Me </button> //it's not. after scroll down!!
the second button appends the element some where. what is the correct way to calculation do we have to do here?
Thanks in advance.
const h1All = document.getElementsByTagName("h1");
function addElement() {
let div = document.createElement('div');
div.innerText = "I am here";
div.style.border = "1px solid green";
div.style.position = "absolute";
let h1 = h1All[0];
h1.style.border = "1px solid red";
let parentPos = h1.getBoundingClientRect();
document.body.appendChild(div);
div.style.top = parentPos.y + parentPos.height + "px";
}
.mydiv{
border: 1px solid green;
height: 600px;
}
<h1>Hello Plunker!</h1>
<div class="mydiv">some div info goes here
<button onclick="addElement()">Click Me </button>
</div>
<button onclick="addElement()">Click Me </button>

If you want absolute positioning, you need to take scrolling into account. You can do that with window.scrollY. Notice the change at the last line of addElement:
const h1All = document.getElementsByTagName("h1");
function addElement() {
let div = document.createElement('div');
div.innerText = "I am here";
div.style.border = "1px solid green";
div.style.position = "absolute";
let h1 = h1All[0];
h1.style.border = "1px solid red";
let parentPos = h1.getBoundingClientRect();
document.body.appendChild(div);
div.style.top = parentPos.y + parentPos.height + window.scrollY + "px";
}
.mydiv{
border: 1px solid green;
height: 600px;
}
<h1>Hello Plunker!</h1>
<div class="mydiv">some div info goes here
<button onclick="addElement()">Click Me </button>
</div>
<button onclick="addElement()">Click Me </button>

Related

Placing Existing Div into a DOM div?

I have a div that I have created with DOM/JS. I have another div that that I have some html in that i would like to place inside of the DOM div. I;m quite new to JS so any help would be appreciated.
//The DOM div
div = document.createElement("div");
div.style.position = "absolute";
div.style.left = "0px";
div.style.top = "0px";
div.style.width = "240px";
div.style.height = "auto";
div.style.background = "red";
div.style.padding = "15px 0px 0px 0px";
div.style.color = "white";
div.id = "chat";
<!--The existing div code-->
<div id="page-wrap">
<h2>Chat</h2>
<p id="name-area"></p>
<div id="chat-wrap"><div id="chat-area"></div></div>
<form id="send-message-area">
<p>Your message: </p>
<textarea id="sendie" maxlength = '100' ></textarea>
</form>
</div>

You can use the innerHTML and outerHTML property like the following way:
const div = document.createElement("div");
div.style.position = "absolute";
div.style.left = "0px";
div.style.top = "0px";
div.style.width = "240px";
div.style.height = "auto";
div.style.background = "red";
div.style.padding = "15px 0px 0px 0px";
div.style.color = "white";
div.id = "chat";
//
div.innerHTML += document.getElementById('page-wrap').outerHTML;
document.getElementById('page-wrap').remove(); // remove the previous one;
document.body.append(div);
<div id="page-wrap">
<h2>Chat</h2>
<p id="name-area"></p>
<div id="chat-wrap"><div id="chat-area"></div></div>
<form id="send-message-area">
<p>Your message: </p>
<textarea id="sendie" maxlength = '100' ></textarea>
</form>
</div>

Given that you already created your divElement, you will just need to get the div in your Html using either id/class etc... example :
var htmlDiv = document.getElementById('chat-area')
And then you would simply append your created div as so :
htmlDiv.append(myCreatedDiv)

Use appendChild method to add element into another (pure JavaScript)
div = document.createElement("div");
div2 = document.createElement("div");
div.appendChild(div2);
Alternative is jQuery's append as yahya mentioned, which uses the appendChild method internally.

Add style with JavaScript

I am trying to set CSS styles using Javascript.
I have written this code:
<div class="dim" id="dim" title="Event">
</div>
<div class="dialog_wrapper" id="dialog_wrapper">
<div class="dialog" id="dialog"><img id="buyukresim" src="http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg" height="250"></div>
</div>
<script>
document.getElementById('buyukresim').style.display = "none";
document.getElementById('dim').style.display = "none";
document.getElementById('dialog_wrapper').style.display = "none";
document.getElementById('dialog').style.display = "none";
function karanlikyap2() {
var ogedim = document.getElementById('dim');
var ogewrapper = document.getElementById('dialog_wrapper');
var ogedialog = document.getElementById('dialog');
var ogeresim = document.getElementById('buyukresim');
ogedim.style.height = "100%";
ogedim.style.width = "100%";
ogedim.style.position = "fixed";
ogedim.style.left = "0";
ogedim.style.top = "0";
ogedim.style.z-index = "1 !important";
ogedim.style.background-color = "black";
ogedim.style.filter = "alpha(opacity=75)";
ogedim.style.-khtml-opacity = "0.75";
ogedim.style.-moz-opacity = "0.75";
ogedim.style.opacity = "0.75";
ogedim.style.display = "block";
ogewrapper.style.width = "100%";
ogewrapper.style.top = "0";
ogewrapper.style.left = "0";
ogewrapper.style.position = "absolute";
ogewrapper.style.z-index = "5";
ogewrapper.style.display = "block";
ogedialog.style.width = "400";
ogedialog.style.height = "400";
ogedialog.style.margin = "0 auto";
ogedialog.style.padding = "40";
ogedialog.style.background-color = "#fff";
ogedialog.style.border = "1px solid #ccc";
ogedialog.style.color = "#333";
ogedialog.style.display = "block";
ogeresim.style.display = "block";
}
</script>
<button onclick="karanlikyap2()">Karanlık 2</button>
But the code is not working.
Note : I have a good French, but my English isn't good. Pardon me. I hope you understand.

What you are doing to alter the CSS is not a good way. Please look for references over the internet. In JS, it doesn't normally work the way you expect it to work. You are trying to change the CSS like you would normally do with CSS, but JS is a bit picky when it comes to CSS. For example to change background color, in CSS you would write "background-color", but in JS "background-color" would be "backgroundColor".
Only change the CSS from JS if absolutely necessary, use CSS class to style your element.
You can reference https://www.kirupa.com/html5/setting_css_styles_using_javascript.htm
But if you really want to do it this way, here it is how:
<div class="dim" id="dim" title="Event">
</div>
<div class="dialog_wrapper" id="dialog_wrapper">
<div class="dialog" id="dialog"><img id="buyukresim" src="http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg" height="250"></div>
</div>
<button onclick="karanlikyap2()">Karanlık 2</button>
<script>
document.getElementById('buyukresim').style.display = "none";
document.getElementById('dim').style.display = "none";
document.getElementById('dialog_wrapper').style.display = "none";
document.getElementById('dialog').style.display = "none";
function karanlikyap2() {
var ogedim = document.getElementById('dim');
var ogewrapper = document.getElementById('dialog_wrapper');
var ogedialog = document.getElementById('dialog');
var ogeresim = document.getElementById('buyukresim');
ogedim.style.height = "100px";
ogedim.style.width = "100px";
ogedim.style.position = "fixed";
ogedim.style.left = "0";
ogedim.style.top = "0";
ogedim.style['z-index'] = "1 !important";
ogedim.style['background-color'] = "black";
ogedim.style.filter = "alpha(opacity=75)";
ogedim.style['-khtml-opacity'] = "0.75";
ogedim.style['-moz-opacity'] = "0.75";
ogedim.style.opacity = "0.75";
ogedim.style.display = "block";
ogewrapper.style.width = "100%";
ogewrapper.style.top = "0";
ogewrapper.style.left = "0";
ogewrapper.style.position = "absolute";
ogewrapper.style['z-index'] = "5";
ogewrapper.style.display = "block";
ogedialog.style.width = "400";
ogedialog.style.height = "400";
ogedialog.style.margin = "0 auto";
ogedialog.style.padding = "40";
ogedialog.style['background-color'] = "#fff";
ogedialog.style.border = "1px solid #ccc";
ogedialog.style.color = "#333";
ogedialog.style.display = "block";
ogeresim.style.display = "block";
}
</script>

As gavgrif hinted at in the comments, it would be better to define static CSS styles and then manipulate the class names instead of trying to set everything with JS. Only setting things at run-time when they need to be dynamic and changeable. This will help with the separation of concerns and help make your code more maintainable.
In this case everything you are defining is static, the only real change you are making is hiding or showing the elements via changing display to none or block. You can easily achieve a similar effect by instead just defining them as blocks and creating a class that hides an element via visibility: hidden. Then you can hide and show them by adding or removing that new class.
This is how I would rewrite it:
function karanlikyap2() {
var ogedim = document.getElementById('dim');
var ogewrapper = document.getElementById('dialog_wrapper');
// you only need to remove the hidden class from the items at the top
// level of the DOM, the wrapper and dim
ogedim.classList.remove('hidden');
ogewrapper.classList.remove('hidden');
}
function hide() {
var ogedim = document.getElementById('dim');
var ogewrapper = document.getElementById('dialog_wrapper');
// add the hidden class back on to hide them again.
ogedim.classList.add('hidden');
ogewrapper.classList.add('hidden');
}
// hide the dialog when something is clicked
document.getElementById('dialog_wrapper').addEventListener('click', hide, false);
document.getElementById('dim').addEventListener('click', hide, false);
#dim {
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 1 !important;
background-color: black;
filter: alpha(opacity=75);
-khtml-opacity: 0.75;
-moz-opacity: 0.75;
opacity: 0.75;
display: block;
}
#dialog_wrapper {
width: 100%;
top: 0;
left: 0;
position: absolute;
z-index: 5;
display: block;
}
#dialog {
width: 400px;
height: 400px;
margin: 0 auto;
padding: 40px;
background-color: #fff;
border: 1px solid #ccc;
color: #333;
display: block;
}
.hidden {
visibility: hidden;
}
<div class="dim hidden" id="dim" title="Event">
</div>
<div class="dialog_wrapper hidden" id="dialog_wrapper">
<div class="dialog" id="dialog">
<img id="buyukresim" src="https://lorempixel.com/output/cats-q-c-250-250-4.jpg" height="250">
</div>
</div>
<button onclick="karanlikyap2()">Karanlık 2</button>
(I've used a different image to get around mixed-content issues because StackOverflow is served over https and your image is on http.)
Further reading:
more information about classList
Séparation du fond et de la forme

How to close custom made prompt box in javascript?

I'm trying to make a custom prompt box in javascript. However, I just can't figure out how to close it again. The cancel button does work (the prompt box disappears), but when you click on the ok button, the box doesn't disappear.
Since I based my code on the code on this page: https://www.developphp.com/video/JavaScript/Custom-Prompt-Box-Programming-Tutorial
But now I see that if I copy the example on that page, the OK button doesn't work either. Can someone tell me what's wrong?
This is the example on the site I linked to, which doesn't work:
<!DOCTYPE html>
<html>
<head>
<style>
#dialogoverlay{
display: none;
opacity: .8;
position: fixed;
top: 0px;
left: 0px;
background: #FFF;
width: 100%;
z-index: 10;
}
#dialogbox{
display: none;
position: fixed;
background: #000;
border-radius:7px;
width:550px;
z-index: 10;
}
#dialogbox > div{ background:#FFF; margin:8px; }
#dialogbox > div > #dialogboxhead{ background: #666; font-size:19px; padding:10px; color:#CCC; }
#dialogbox > div > #dialogboxbody{ background:#333; padding:20px; color:#FFF; }
#dialogbox > div > #dialogboxfoot{ background: #666; padding:10px; text-align:right; }
</style>
<script>
function changeText(val){
document.getElementById('status').innerHTML = val;
}
function doStuff(val){
document.body.style.background = val;
}
function CustomAlert(){
this.render = function(dialog){
var winW = window.innerWidth;
var winH = window.innerHeight;
var dialogoverlay = document.getElementById('dialogoverlay');
var dialogbox = document.getElementById('dialogbox');
dialogoverlay.style.display = "block";
dialogoverlay.style.height = winH+"px";
dialogbox.style.left = (winW/2) - (550 * .5)+"px";
dialogbox.style.top = "100px";
dialogbox.style.display = "block";
document.getElementById('dialogboxhead').innerHTML = "Acknowledge This Message";
document.getElementById('dialogboxbody').innerHTML = dialog;
document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Alert.ok()">OK</button>';
}
this.ok = function(){
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
}
}
var Alert = new CustomAlert();
function CustomConfirm(){
this.render = function(dialog,op,id){
var winW = window.innerWidth;
var winH = window.innerHeight;
var dialogoverlay = document.getElementById('dialogoverlay');
var dialogbox = document.getElementById('dialogbox');
dialogoverlay.style.display = "block";
dialogoverlay.style.height = winH+"px";
dialogbox.style.left = (winW/2) - (550 * .5)+"px";
dialogbox.style.top = "100px";
dialogbox.style.display = "block";
document.getElementById('dialogboxhead').innerHTML = "Confirm that action";
document.getElementById('dialogboxbody').innerHTML = dialog;
document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Confirm.yes(\''+op+'\',\''+id+'\')">Yes</button> <button onclick="Confirm.no()">No</button>';
}
this.no = function(){
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
}
this.yes = function(op,id){
if(op == "delete_post"){
deletePost(id);
}
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
}
}
var Confirm = new CustomConfirm();
function CustomPrompt(){
this.render = function(dialog,func){
var winW = window.innerWidth;
var winH = window.innerHeight;
var dialogoverlay = document.getElementById('dialogoverlay');
var dialogbox = document.getElementById('dialogbox');
dialogoverlay.style.display = "block";
dialogoverlay.style.height = winH+"px";
dialogbox.style.left = (winW/2) - (550 * .5)+"px";
dialogbox.style.top = "100px";
dialogbox.style.display = "block";
document.getElementById('dialogboxhead').innerHTML = "A value is required";
document.getElementById('dialogboxbody').innerHTML = dialog;
document.getElementById('dialogboxbody').innerHTML += '<br><input id="prompt_value1">';
document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Prompt.ok(\''+func+'\')">OK</button> <button onclick="Prompt.cancel()">Cancel</button>';
}
this.cancel = function(){
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
}
this.ok = function(func){
var prompt_value1 = document.getElementById('prompt_value1').value;
window[func](prompt_value1);
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
}
}
var Prompt = new CustomPrompt();
</script>
</head>
<body>
<div id="dialogoverlay"></div>
<div id="dialogbox">
<div>
<div id="dialogboxhead"></div>
<div id="dialogboxbody"></div>
<div id="dialogboxfoot"></div>
</div>
</div>
<h1>My web document content ...</h1>
<h2>My web document content ...</h2>
<button onclick="alert('You look very pretty today.')">Default Alert</button>
<button onclick="Alert.render('You look very pretty today.')">Custom Alert</button>
<button onclick="Prompt.render('And you also smell very nice.')">Custom Alert 2</button>
<h3>My web document content ...</h3>
</body>
</html>

You're missing the second parameter for the ok button click, which allows you to invoke a function once you click ok:
<button onclick="Prompt.render('And you also smell very nice.', 'doStuff')">Custom Alert 2</button>
This will invoke doStuff with the value from the prompt.

There is one possibility check with the id's used for elements in you the code provided if at all there are duplicate id the javaScript will not work properly.
This statement in the code,
document.getElementById('dialogbox').style.display = "none";
Is making use of element with id 'dialogbox' so if at all there is another element in your page having same id. your code will not work properly. More help can be provided if there is code with problem is shared.

Could help me to resolve mouse events?

<script>
var theNumOfWins;
var part;
theNumOfWins = 0;
function openWindow(){
part = partOfWindow("outlayer",theNumOfWins,"section0");
setCSS(part.css,"-1","400px","400px","#65A8E8","relative","30px","30px","initial","none");
part = partOfWindow("headerOfWindow",theNumOfWins,part.id);
setCSS(part.css,"1","400px","25px","#65A8E8","relative","0px","0px","initial","none");
part = partOfWindow("zoneOfWindowPosition",theNumOfWins,part.id);
setCSS(part.css,"1","204px","22px","transparent","absolute","192px","4px","move","1px solid red");
document.getElementById("5").innerHTML = document.getElementById(part.id).attributes[2].value;
theNumOfWins++;
}
function partOfWindow(name,theNumOfWins,parent){
var id;
var css;
var idAndCSS;
var tag;
var att;
id = name + "Id" + theNumOfWins;
css = name + "CSS";
tag = document.createElement("div");
tag.setAttribute("id",id);
tag.setAttribute("class",css);
document.getElementById(parent).appendChild(tag);
idAndCSS = {
tag: tag,
id: id,
css: css
}
return idAndCSS;
}
function setCSS(className,zIndex,width,height,backgroundColor,position,left,top,cursor,border){
var i;
var cssPart;
cssPart = document.getElementsByClassName(className);
document.getElementById("1").innerHTML = cssPart.length;
document.getElementById("2").innerHTML = cssPart[0];
document.getElementById("3").innerHTML = cssPart[1];
document.getElementById("4").innerHTML = cssPart[2];
for(i=0; i < cssPart.length; i++){
cssPart[i].style.zIndex = zIndex;
cssPart[i].style.width = width;
cssPart[i].style.height = height;
cssPart[i].style.backgroundColor = backgroundColor;
cssPart[i].style.position = position;
cssPart[i].style.left = left;
cssPart[i].style.top = top;
cssPart[i].style.cursor = cursor;
cssPart[i].style.border = border;
}
}
</script>
Hi!!! I need help!!!
I made a object of "div".
and then I added one more "div" into first "div".
second "div" is a red box. You can see it when you click the "+"mark.
But, second "div" has mouse event, and the event does not work.
I want to change mouse cursor when cursor become on the red box.
Why does not the mouse event work?
My last purpose is to make window object.
And there will be a lot of mouse events.
I already made window object similar to this one. However, it also did not work.
How can I try mouse event?
This is my full source: https://drive.google.com/file/d/0B4p8lZSEMXcqZUdacVJyVlBiUWc/view?usp=sharing

This is a CSS issue. Your problem is here:
part = partOfWindow("outlayer",theNumOfWins,"section0");
setCSS(part.css,"-1","400px","400px","#65A8E8","relative","30px","30px","initial","none");
Specifically, where you set the z-index to -1, by doing so you place the div and everything contained in it under the active layer so to speak. As such the hover event doesn't propagate to your div. change this to 1 and the cursor will behave as expected.
var theNumOfWins;
var part;
theNumOfWins = 0;
function openWindow(){
part = partOfWindow("outlayer",theNumOfWins,"section0");
setCSS(part.css,"1","400px","400px","#65A8E8","relative","30px","30px","initial","none");
part = partOfWindow("headerOfWindow",theNumOfWins,part.id);
setCSS(part.css,"1","400px","25px","#65A8E8","relative","0px","0px","initial","none");
part = partOfWindow("zoneOfWindowPosition",theNumOfWins,part.id);
setCSS(part.css,"1","204px","22px","transparent","absolute","192px","4px","pointer","1px solid red");
document.getElementById("5").innerHTML = document.getElementById(part.id).attributes[1].value;
theNumOfWins++;
}
function partOfWindow(name,theNumOfWins,parent){
var id;
var css;
var idAndCSS;
var tag;
var att;
id = name + "Id" + theNumOfWins;
css = name + "CSS";
tag = document.createElement("div");
tag.setAttribute("id",id);
tag.setAttribute("class",css);
document.getElementById(parent).appendChild(tag);
idAndCSS = {
tag: tag,
id: id,
css: css
}
return idAndCSS;
}
function setCSS(className,zIndex,width,height,backgroundColor,position,left,top,cursor,border){
var i;
var cssPart;
cssPart = document.getElementsByClassName(className);
document.getElementById("1").innerHTML = cssPart.length;
document.getElementById("2").innerHTML = cssPart[0];
document.getElementById("3").innerHTML = cssPart[1];
document.getElementById("4").innerHTML = cssPart[2];
for(i=0; i < cssPart.length; i++){
cssPart[i].style.zIndex = zIndex;
cssPart[i].style.width = width;
cssPart[i].style.height = height;
cssPart[i].style.backgroundColor = backgroundColor;
cssPart[i].style.position = position;
cssPart[i].style.left = left;
cssPart[i].style.top = top;
cssPart[i].style.cursor = cursor;
cssPart[i].style.border = border;
}
}
#buttonToOpenWindow{
width:50px;
height:20px;
border: 1px solid #DCDCDC;
margin: 2px;
position:fixed;
left:-1px;
top:0px;
}
#buttonToOpenWindow div.positionOfPlus{
width:20px;
height:20px;
position:absolute;
left:30px;
}
div.wrapOfPlus{
width:20px;
height:20px;
}
div.inside01{
width:15px;
height:5px;
background-color: #B0C4DE;
position:absolute;
left:2.5px;
top:7.5px;
}
div.inside02{
width:5px;
height:15px;
background-color: #B0C4DE;
position:absolute;
left:7.5px;
top:2.5px;
}
<section id="section0">
<div id="buttonToOpenWindow" onclick="openWindow()">
<div class="positionOfPlus">
<div class="wrapOfPlus">
<div class="inside01"></div>
<div class="inside02"></div>
</div>
</div>
</div>
</section>
<footer>
<br><br><br><br><br>
<div style="display:inline-flex;">00: <div id="0"></div></div><br>
<div style="display:inline-flex;">01: <div id="1"></div></div><br>
<div style="display:inline-flex;">02: <div id="2"></div></div><br>
<div style="display:inline-flex;">03: <div id="3"></div></div><br>
<div style="display:inline-flex;">04: <div id="4"></div></div><br>
<div style="display:inline-flex;">05: <div id="5"></div></div><br>
<div style="display:inline-flex;">06: <div id="6"></div></div><br>
<div style="display:inline-flex;">07: <div id="7"></div></div><br>
<div style="display:inline-flex;">08: <div id="8"></div></div><br>
<div style="display:inline-flex;">09: <div id="9"></div></div><br>
<div style="display:inline-flex;">10: <div id="10"></div></div><br>
<div style="display:inline-flex;">11: <div id="11"></div></div><br>
<div style="display:inline-flex;">12: <div id="12"></div></div><br>
<div style="display:inline-flex;">13: <div id="13"></div></div><br>
<div style="display:inline-flex;">14: <div id="14"></div></div><br>
<div style="display:inline-flex;">15: <div id="15"></div></div><br>
<div style="display:inline-flex;">16: <div id="16"></div></div><br>
<div style="display:inline-flex;">17: <div id="17"></div></div><br>
<div style="display:inline-flex;">18: <div id="18"></div></div><br>
<div style="display:inline-flex;">19: <div id="19"></div></div><br>
<div style="display:inline-flex;">20: <div id="20"></div></div><br>
<div style="display:inline-flex;">21: <div id="21"></div></div><br>
<div style="display:inline-flex;">22: <div id="22"></div></div><br>
<div style="display:inline-flex;">23: <div id="23"></div></div><br>
<div style="display:inline-flex;">24: <div id="24"></div></div><br>
<div style="display:inline-flex;">25: <div id="25"></div></div><br>
<div style="display:inline-flex;">26: <div id="26"></div></div><br>
<div style="display:inline-flex;">27: <div id="27"></div></div><br>
<div style="display:inline-flex;">28: <div id="28"></div></div><br>
<div style="display:inline-flex;">29: <div id="29"></div></div><br>
<div style="display:inline-flex;">30: <div id="30"></div></div><br>
<div style="display:inline-flex;">111: <div id="111"></div></div><br>
<div style="display:inline-flex;">222: <div id="222"></div></div><br>
<div style="display:inline-flex;">333: <div id="333"></div></div><br>
<div style="display:inline-flex;">444: <div id="444"></div></div><br>
<div style="display:inline-flex;">555: <div id="555"></div></div><br>
<div style="display:inline-flex;">666: <div id="666"></div></div><br>
<div style="display:inline-flex;">777: <div id="777"></div></div><br>
<div style="display:inline-flex;">888: <div id="888"></div></div><br>
<div style="display:inline-flex;">999: <div id="999"></div></div><br>
</footer>

Problem with innerXhtml and onclick attribute

In the XHTML page i have this div:
<div id="listAzioni">
<h4 style="margin-bottom:3px;">List shape :</h4>
</div>
Subsequently incorporated within the div an input element via javascript using the library innerXhtml.
var paper = document.getElementById("listAzioni");
var toWrite = "<h4 style=\"margin-bottom:3px\">List shape :</h4>";
toWrite += "<input type=\"button\" class=\"listButton\" value=\""+id+"\" onclick=\"showAction('"+id+"');\"/>"+'<br/>';
innerXHTML(paper,toWrite);
But after adding the input element has no onclick attribute. I tried so hard but I have not found anything that would solve my problem. Where am I doing wrong?

Which browsers have you tried?
I suggest you to use standard DOM APIs, I write your code as below:
<html>
<head>
<style type="text/css">
.button {
border: 1px solid black;
padding: 3px;
}
</style>
<script type='text/javascript'>
function addButton() {
var container = document.getElementById('container');
if (container != null && container != undefined) {
var child = document.createElement("div");
var button = document.createElement("input");
button.value = "Click to alert";
button.type = "button";
child.style.padding = "10px";
child.style.border = "2px solid red";
button.className = "button";
button.onclick = showAlert;
child.appendChild(button);
container.appendChild(child);
}
}
function showAlert() {
alert("you clicked the button!");
}
</script>
</head>
<body>
<div id="container"></div>
<input value="add div and button" type='button' onclick='addButton();'/>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

Element appending with and without scroll varies - javascript

Related

Placing Existing Div into a DOM div?

Add style with JavaScript

How to close custom made prompt box in javascript?

Could help me to resolve mouse events?

Problem with innerXhtml and onclick attribute

Categories

Resources