I'm trying to set the width of the button as below, but it isn't changing the size. Can someone please advise on how the size can be changed within this JavaScript?
var tableElement = document.getElementById('dynamic_field_arrow_deliverables');
var btn = document.createElement("BUTTON");
var t = document.createTextNode("->");
btn.setAttribute("width", "250px");
btn.appendChild(t);
btn.id ='btnDeliver'+i;
tr.appendChild(btn);
You could set the css width property.
var tableElement = document.getElementById('dynamic_field_arrow_deliverables');
var btn = document.createElement("BUTTON");
var t = document.createTextNode("->");
btn.style.width = "250px";
btn.appendChild(t);
btn.id ='btnDeliver1';
tableElement.appendChild(btn);
<div id="dynamic_field_arrow_deliverables"></div>
Related
I have 1 function that creates a new checkbox with a delete button to remove it. However when using onclick for the delete button, it causes the it to be deleted when the create checkbox is activated so that nothing is there in the first place.
<script>
var list = document.getElementById("list");
var i = 0;
function add_client(form) {
var div = document.createElement("div");
div.setAttribute("id", "div"+i.toString())
var check = document.createElement("input")
check.setAttribute("type", "checkbox");
check.setAttribute("id", "check"+i.toString());
var label = document.createElement("label");
label.setAttribute("for", "check"+i.toString());
label.setAttribute("id", "label")
txtNode = document.createTextNode(form.value);
label.appendChild(txtNode);
var br = document.createElement("br");
div.appendChild(check);
div.appendChild(label);
list.appendChild(div)
i++;
var del = document.createElement("input");
del.setAttribute("type", "button");
del.setAttribute("value", "Delete");
del.setAttribute("id", "del")
div.appendChild(del);
del.onclick = del.remove();
div.appendChild(br);
}
</script>
i know this is a DOM issue but cannot get around it.... any ideas?
I have one cell (columns), in which I want to add two buttons. This is what I created:
var editbtn = document.createElement('button');
editbtn.type= "button";
editbtn.className= "editbtn";
editbtn.id= "edit-button-"+(i+1);
editbtn.innerHTML= "Edit";
editbtn.onclick = editRow.bind(this, i + 1);
var savebtn = document.createElement('button');
savebtn.type= "button";
savebtn.className= "savebtn";
savebtn.id= "save-button-"+(i+1);
savebtn.innerHTML= "Save";
savebtn.onclick = saveRow.bind(this, i + 1);
cell3.appendChild(editbtn);
cell3.appendChild(savebtn);
However, only the savebtn appears. How to append two buttons or more in the same column?
You can easily do that with an array and a for loop:
var names = ['edit', 'save'];
var editRows = [editRow, saveRow];
for ( var i = 0; i < names.length; i++ )
{
var btn = document.createElement('button');
btn.type = "button";
btn.className = names[i] + "btn";
btn.id = names[i] + "-button-" + (i+1);
btn.innerHTML = names[i];
btn.onclick = editRows[i].(this, i + 1);
cell3.appendChild( editbtn );
}
You can add as many button as you want then just updating names and editRows accordingly, no need to touch the for loop.
I am having trouble understanding why the text is not changing when I click the button. It is being executed right away when the page starts instead. I am not sure why this is happening because I told it to only execute when you click on the button.
<!DOCTYPE html>
<html id="all">
<head>
<head>
</head>
<title>Lab8</title>
<style></style>
</head>
<body>
<script>
var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';
document.getElementsByTagName('body')[0].appendChild(iDiv);
iDiv.style.backgroundColor = "#d79365";
iDiv.style.padding = "40px";
var innerDiv2 = document.createElement('div');
innerDiv2.className = 'block-3';
iDiv.appendChild(innerDiv2);
innerDiv2.style.padding = "40px";
innerDiv2.style.textAlign = "center";
innerDiv2.innerHTML = "Here is changing the text: ";
//innerDiv2.innerHTML = "Text Change when button clicked";
//innerDiv2.style.textAlign = "center";
// Now create and append to iDiv
var innerDiv = document.createElement('div');
innerDiv.className = 'block-2';
// The variable iDiv is still good... Just append to it.
iDiv.appendChild(innerDiv);
innerDiv.innerHTML = "I'm the inner div";
innerDiv.style.padding = "40px";
innerDiv.style.backgroundColor = "#eac67a";
var ClickButton = document.createElement('button');
ClickButton.className = 'block-4';
iDiv.appendChild(ClickButton);
ClickButton.innerHTML = "Style";
ClickButton.style.margin = "auto";
ClickButton.style.display = "block";
ClickButton.style.width = "80px";
ClickButton.style.height = "50px";
ClickButton.style.top = "50px";
ClickButton.style.backgroundColor = "#233237";
ClickButton.style.color = "white";
function js_style(){
alert("hi");
document.querySelector("innerDiv2");
innerDiv2.style.fontSize = 'large';
innerDiv2.style.font = 'italic bold 20px arial,serif';
innerDiv2.style.color = "#eac67a";
};
document.getElementsByTagName('button').onclick = js_style();
</script>
</body>
The problem with your code is that getElementsByTagName returns a HTMLCollection - which behaves a little like an array, in that you can access the individual elements using array syntax like x[0]
However, as you're creating the button dynamically, you can dispense with that, and, in the process, dispense with last millennium code element.onclick=rubbish
var ClickButton = document.createElement('button');
ClickButton.addEventListener('click', js_style);
done
document.getElementsByTagName('button') returns a HTMLCollection.
Setting the 'onclick' value of the HTMLCollection does not set the 'onclick' handle of the button.
i could get the example to work by giving the button an id and retrieving the button via that id (rather than it's tag name):
https://jsfiddle.net/0L1kj3ja/
var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';
document.getElementsByTagName('body')[0].appendChild(iDiv);
iDiv.style.backgroundColor = "#d79365";
iDiv.style.padding = "40px";
var innerDiv2 = document.createElement('div');
innerDiv2.className = 'block-3';
iDiv.appendChild(innerDiv2);
innerDiv2.style.padding = "40px";
innerDiv2.style.textAlign = "center";
innerDiv2.innerHTML = "Here is changing the text: ";
//innerDiv2.innerHTML = "Text Change when button clicked";
//innerDiv2.style.textAlign = "center";
// Now create and append to iDiv
var innerDiv = document.createElement('div');
innerDiv.className = 'block-2';
// The variable iDiv is still good... Just append to it.
iDiv.appendChild(innerDiv);
innerDiv.innerHTML = "I'm the inner div";
innerDiv.style.padding = "40px";
innerDiv.style.backgroundColor = "#eac67a";
var ClickButton = document.createElement('button');
ClickButton.id = 'btn';
ClickButton.className = 'block-4';
iDiv.appendChild(ClickButton);
ClickButton.innerHTML = "Style";
ClickButton.style.margin = "auto";
ClickButton.style.display = "block";
ClickButton.style.width = "80px";
ClickButton.style.height = "50px";
ClickButton.style.top = "50px";
ClickButton.style.backgroundColor = "#233237";
ClickButton.style.color = "white";
function js_style(){
alert("hi");
document.querySelector("innerDiv2");
innerDiv2.style.fontSize = 'large';
innerDiv2.style.font = 'italic bold 20px arial,serif';
innerDiv2.style.color = "#eac67a";
};
document.getElementById('btn').onclick = js_style;
instead of
document.getElementsByTagName('button').onclick = js_style();
try this :
var buttons = document.getElementsByTagName('button');
for (var i=0;i<buttons.length;i++)
{
buttons[i].onclick = js_style;
}
when you use js_style(); javascript will call that function so you should just introduce your function name to .onclick
You were attaching onclick event to collection of JS nodes. I've refactored your code and added one more class to button element to attachclick event on that.
It is always advisable to add class with js prefix to attach event handler to DOM elements. In this way,no one will mess with js-* classes.
//create outer div and apply styles
var outerDiv = document.createElement('div');
var outerDivStyle = 'background-color:#d79365;padding: 40px;';
outerDiv.id = 'block';
outerDiv.className = 'block';
document.getElementsByTagName('body')[0].appendChild(outerDiv);
outerDiv.style.cssText = outerDivStyle;
//create inner div and apply styles
var innerDiv = document.createElement('div');
innerDiv.className = 'block-3';
outerDiv.appendChild(innerDiv);
var innerDivStyle = 'padding: 40px;text-align:center;';
innerDiv.innerHTML = "Here is changing the text: ";
innerDiv.style.cssText = innerDivStyle;
//create last div and apply styles
var lastDiv = document.createElement('div');
lastDiv.className = 'block-2';
// The variable iDiv is still good... Just append to it.
outerDiv.appendChild(lastDiv);
lastDiv.innerHTML = "I'm the inner div";
var lastDivStyle = 'background-color:#eac67a;padding: 40px;';
lastDiv.style.cssText = lastDivStyle;
//create button
var clickButton = document.createElement('button');
clickButton.id = 'js-btn';
clickButton.className = 'block-4';
outerDiv.appendChild(clickButton);
var btnStyles = 'background-color:#233237;color: white;margin:auto;display:block;width: 80px; height:50px;';
lastDiv.style.cssText = lastDivStyle;
clickButton.innerHTML = "Style";
clickButton.style.cssText = btnStyles;
function jsStyle() {
alert("hi");
document.querySelector("innerDiv");
innerDiv.style.fontSize = 'large';
innerDiv.style.font = 'italic bold 20px arial,serif';
innerDiv.style.color = "#eac67a";
};
document.querySelector('#js-btn').onclick = jsStyle;
I am creating a page in which a user can add a question and its solution, he can delete the problem and can also edit it dynamically using DOM in javascript. I want that whenever user clicks on edit button the textbox which appears get autofocus.
This the javascript code of my page...
var questionText;
var answerText;
var questionArray=[];
var answerArray=[];
var i=0;
var j=10000;
function addProblem(){
var body = document.getElementsByTagName('body')[0];
questionText = document.getElementById('questionId').value;
answerText = document.getElementById('answerId').value;
questionArray.unshift(questionText);
answerArray.unshift(answerText);
var myContainer = document.getElementById('container');
var myDiv = document.createElement("div");
var questionLogo = document.createElement("p");
questionLogo.id = "questionLogo";
var textNode = document.createTextNode("Question:");
var question = document.createElement("p");
question.id = "question";
var questionDetail = document.createTextNode(questionArray[0]);
var deleteButton = document.createElement("button");
deleteButton.innerHTML = "Delete";
deleteButton.id = i;
var editButton = document.createElement("button");
editButton.innerHTML = "Edit";
editButton.id = j;
var answerLogo = document.createElement("p");
answerLogo.id = "answerLogo"
var ansTextNode = document.createTextNode("Answer: ");
var answer = document.createElement("p");
answer.id = "answer";
var answerDetail = document.createTextNode(answerArray[0]);
var mybr = document.createElement("br");
if(i==0){
myContainer.appendChild(myDiv);
myDiv.appendChild(questionLogo);
questionLogo.appendChild(textNode);
questionLogo.appendChild(question);
question.appendChild(questionDetail);
myDiv.appendChild(answerLogo);
answerLogo.appendChild(ansTextNode);
answerLogo.appendChild(answer);
answer.appendChild(answerDetail);
answerLogo.appendChild(mybr);
myDiv.appendChild(deleteButton);
myDiv.innerHTML += ' ';
myDiv.appendChild(editButton);
}
else if (i > 0)
{
myContainer.insertBefore(myDiv,myContainer.firstChild);
myDiv.appendChild(questionLogo);
questionLogo.appendChild(textNode);
questionLogo.appendChild(question);
question.appendChild(questionDetail);
myDiv.appendChild(answerLogo);
answerLogo.appendChild(ansTextNode);
answerLogo.appendChild(answer);
answer.appendChild(answerDetail);
answer.appendChild(mybr);
myDiv.appendChild(deleteButton);
myDiv.innerHTML += ' ';
myDiv.appendChild(editButton);
}
i++;
j++;
myDiv.childNodes[7].addEventListener("click", function(){
var deleteElement = document.getElementById(this.id);
deleteElement.parentNode.parentNode.removeChild(deleteElement.parentNode);
});
myDiv.childNodes[9].addEventListener("click",function(){
var editElement = document.getElementById(this.id);
var quesEdit = editElement.parentNode.childNodes[1];
var quesEditText = quesEdit.innerHTML;
var ansEdit = editElement.parentNode.childNodes[4];
var ansEditText = ansEdit.innerHTML;
var editDiv1 = document.createElement("div");
editDiv1.id = "editDiv1"
var quesTextArea = document.createElement("textarea");
quesTextArea.innerHTML += quesEditText;
quesTextArea.focus();
var saveButton1 = document.createElement("button");
saveButton1.innerHTML = "Save";
editDiv1.appendChild(quesTextArea);
editDiv1.innerHTML += ' ';
editDiv1.appendChild(saveButton1);
quesEdit.parentNode.replaceChild(editDiv1,quesEdit);
var editDiv2 = document.createElement("div");
editDiv2.id = "editDiv2"
var ansTextArea = document.createElement("textarea");
ansTextArea.innerHTML += ansEditText;
var saveButton2 = document.createElement("button");
saveButton2.innerHTML = "Save";
editDiv2.appendChild(ansTextArea);
editDiv2.innerHTML += ' ';
editDiv2.appendChild(saveButton2);
ansEdit.parentNode.replaceChild(editDiv2,ansEdit);
});
}
I have tried to focus the textarea using
quesTextArea.focus();
but its not working where questextArea is the name of the textarea. Please help how i can do it.
For the element could be got focused, it must be in the DOM when you invoke focus on it. You should invoke focus function after replaceChild function
editDiv1.appendChild(quesTextArea);
editDiv1.appendChild(saveButton1);
quesEdit.parentNode.replaceChild(editDiv1,quesEdit);
quesTextArea.focus();
I've created a simple sample as below link, you could check it
https://jsfiddle.net/pd9c6c7a/3/
Add autofocus attribute to the textarea element. So that whenever it is appended to the DOM, will get cursor activated in it.
The 'textarea' has not been added to window to be shown, an element must be part of the document object tree. In case that didn't work, add a 50ms delay.
setTimeout(function(){e.focus();}, 50);
Try the following approach:
var body=document.getElementsByTagName('body')[0];
var quesTextArea=document.createElement("textarea");
var button=document.createElement("button");
button.innerHTML = "click Me";
button.addEventListener("click",function(e){
e.preventDefault();
quesTextArea.focus();
});
body.appendChild(quesTextArea);
body.appendChild(button);
<html>
<body>
<body>
</html>
Try to add preventDefault.
var div = document.getElementById('parent');
var txt = document.createElement('textarea');
div.appendChild(txt);
txt.focus();
<html>
<head></head>
<body>
<div id="parent">
<input type="text" value="" />
</div>
</body>
</html>
The element must be in the DOM when you invoke the focus function. Move your focus() function after the appendChild() is invoked.
quesTextArea.innerHTML += quesEditText;
var saveButton1=document.createElement("button");
saveButton1.innerHTML="Save";
editDiv1.appendChild(quesTextArea);
quesTextArea.focus();
I want adequate alignment of my form attributes. I tried using CSS, but dont know how to use it in javascript. I am new to development so any help will be appreciated.
<script type='text/javascript'>
function nextformdisplay()
{
var noee =document.getElementById('noe').value;
// document.getElementById('noe').value=noee-1;
var i;
for(i=0;i<noee;i++)
{
var btn = document.createElement("TEXT");
var t = document.createTextNode("EVENT NAME: ");
btn.appendChild(t);
document.body.appendChild(btn);
var x = document.createElement("INPUT");
x.setAttribute("type", "text");
document.body.appendChild(x);
linebreak = document.createElement("br");
document.body.appendChild(linebreak);
var btn1 = document.createElement("TEXT");
var t1 = document.createTextNode("EVENT TIME:");
btn1.appendChild(t1);
document.body.appendChild(btn1);
var x1 = document.createElement("INPUT");
x1.setAttribute("type", "text");
x1.value="HH:MM:SS";
document.body.appendChild(x1);
linebreak = document.createElement("br");
document.body.appendChild(linebreak);
var btn2 = document.createElement("TEXT");
var t2 = document.createTextNode("PLAYER NAME:");
btn2.appendChild(t2);
document.body.appendChild(btn2);
var x2 = document.createElement("INPUT");
x2.setAttribute("type", "text");
document.body.appendChild(x2);
linebreak = document.createElement("p");
document.body.appendChild(linebreak);
}
}
</script>
Define CSS classes as you Desire and append these classes to them via JavaScript as you wish.
You can als.o use element IDs or inline css but Using CSS classes makes your life easier
e.g
css
.my-spacing-class{
padding:100px;
/* Other properties go here*/
}
javascript
var btn = document.createElement("TEXT");
btn.className += " my-spacing-class";
NOTE : The [SPACE] before my-spacing-class is intentional!!!!