I am attempting to repeat the contents of a DIV when clicking on its content.
<html>
<head>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<div id="repeatTHIS">
<a>text</a><br>
<button id="button" onclick="repeat()">text</button><br>
<a>text</a>
</div>
</body>
</html>
javascript.js
document.getElementById('button').onclick = repeat;
var i = 0;
var original = document.getElementById('repeatTHIS');
function repeat() {
var clone = original.cloneNode(true);
clone.id = "repeatTHIS1" + ++i;
original.parentNode.appendChild(clone);
}
I would also like to randomly position the replicated div, however I cannot even get my DIV to repeat.
Edit:
DEMO
This actually works using jsfiddle, but not when using notepad
You're including, and running, the JS before that element ever exists. original will be undefined. Move the script include below the HTML:
<body>
<div id="repeatTHIS">
<button class="button" onclick="repeat()">text</button><br>
<button class="button" onclick="repeat()">text</button><br>
<button class="button" onclick="repeat()">text</button>
</div>
<script type="text/javascript" src="javascript.js"></script>
</body>
And eliminate the getElementById('button') call, since (a) it won't work since IDs must be unique, and (b) it's unnecessary given your click handlers on the elements.
Example: http://codepen.io/paulroub/pen/bxgIe
Related
I want to block all actions to be triggered on a particular element and all its child too. I tried code below, in which I have a button and one div having a p tag with default text. So on button click i disable the the div. And want to block all actions to be performed on element which is disable and its child too. But i have modify function which modify text. event after disabling div if pass we any of its child element it get affected I don't want it to be affected.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script>
function modify(ele){
ele.html("modified");
};
function clickHandler(){
$('#div *').attr('disabled', true);
modify($("p"));
}
</script>
<button onclick = clickHandler()>Show</button>
<div id="div">
<p>default</p>
</div>
</body>
</html>
You need to check for disabled attribute and prevent the operation.
\
function modify(ele){
var containerDiv = $('#div');
if(!containerDiv.attr('disabled') || !containerDiv[0].contains(ele[0])){
ele.html("modified");
}
};
function clickHandler(){
$('#div').attr('disabled', true);
modify($("p"));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<button onclick = clickHandler()>Show</button>
<div id="div">
<p>default</p>
</div>
</body>
</html>
So, I want the user to be able to add a new paragraph when he/she clicks the Add button. I can see it's working when I click the button but after that the page refreshes itself, and then the supposedly new paragraph disappears.
Here's the HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Item Lister</title>
<link rel="stylesheet" type="text/css" href="default.css"\>
</head>
<body>
<h1>ITEM LIST</h1>
<div id="container">
<ol>
</ol>
</div>
</br>
<form>
<input id="txtbox" type="text" name="txt"/>
</br>
<button id="add_btn" type="submit" name="add"/>Add</button>
</form>
<script src="myScript.js"></script>
</body>
</html>
And here's its JS code:
add_btn.onclick = function(){
var msg;
msg = document.getElementById("txtbox").value;
var newListElement = document.createElement("li");
var liText = document.createTextNode(msg);
newListElement.appendChild(liText);
document.getElementById("container").getElementsByTagName('ol')[0].appendChild(newListElement);
};
How do I add the new element after clicking the button?
Thanks.
Remove type="submit"
Edit : Turns out that just removing the submit attribute is not enough.
It should be changed to : type="button" :
<button id="add_btn" type="button" name="add"/>Add</button>
You have in fact at least two options:
Remove type="submit" as Bulent Vural already mentioned
Or return false from your onClick handler
I made some code using the javascript createElement() and appendChild(), but it does not work. However, when I apply jQuery approach, it works normally. Can any one tell me why?
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function foo1(){
var test_btn = document.createElement("button").appendChild(document.createTextNode("test_btn"));
document.getElementById("WhyThisNothing").appendChild(test_btn);
}
function foo2(){
$('#WhyThisNothing').append('<button>test_btn</button>');
}
function foo3(){
$('#WhyThisNothing').append($('<button></button>',{text:"test_btn"}));
}
</script>
</head>
<body>
<button onclick="foo1()" id="btn">Click me then error 1:(</button>
<button onclick="foo2()" id="btn">Click me then ok 2:(</button>
<button onclick="foo3()" id="btn">Click me then ok 3:(</button>
<div id="WhyThisNothing"></div>
</body>
</html>
appendChild returns the appended child, not the parent it was appended to.
So, you have to append the text to the element separately, not chain it, as all you're left with is the textnode
function foo1(){
var test_btn = document.createElement("button");
test_btn.appendChild(document.createTextNode("test_btn"));
document.getElementById("WhyThisNothing").appendChild(test_btn);
}
So currently I want to have my javascript in an attached JS file instead of using the 'OnClick' function attached to HTML objects. So far I've got:
<html>
<head>
</head>
<body>
<h1 id = '5' class = ''>6</h1>
<button id = '7' class = ''>8</button>
<script src = 'js/9.js'></script>
</body>
</html>
But unfortunately, I can't quite get the redirect going from clicking the button. It should have this source
document.getElementById('7').onclick = function () {
and then redirecting to a different page. Any tips on how I can improve this?
Please use strings as ID. I know you can now use numbers but it is not recommended
Use the load event handler
You MAY be submitting the page to itself when not giving the button a type so return false or preventDefault
what's with the spacing around = in the attributes? Not necessary nor recommended.
Like this
<html>
<head>
<script src="js/9.js"></script>
</head>
<body>
<h1 id="five" class="">6</h1>
<button id="seven" class="">8</button>
</body>
</html>
where js file has
window.onload=function() {
document.getElementById("seven").onclick = function () {
location.replace("page2.html"); // or just location="page2.html";
return false;
}
}
Using jQuery it would be
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/9.js"></script>
</head>
<body>
<h1 id="five" class="">6</h1>
<button id="seven" class="">8</button>
</body>
</html>
where js file has
$(function() {
$("#seven").on("click",function (e) {
e.preventDefault();
location.replace("page2.html"); // or just location="page2.html";
});
});
LASTLY you do not need script at all:
<form action="page2.html">
<button type="submit" id="seven" class="">8</button>
</form>
I have a simple html page
<body>
<button type="button" id="button1" onclick="foo()">Result!</button>
<script type="text/javascript">
function foo() {
var button = document.getElementById("button1");
}
</script>
</body>
I want to change the button title on click.
The title might include HTML tags and I want it to be presented as is (without formatting).
I've tried the way suggested in this post and it works great for a regular text. Unfortunately it formats the HTML tags and doesn't present the non-formatted text:
<body>
<button type="button" id="button1" onclick="foo()">Result!</button>
<script type="text/javascript">
function foo() {
var button = document.getElementById("button1");
button.innerHTML = "<strong>my text</strong>"
}
</script>
</body>
To be clear, I want the title to be <strong>my text</strong> and not my text.
So what is the right way to present a non-formatted text inside the button?
The innerText attribute will do the work:
<body>
<button type="button" id="button1" onclick="foo()">Result!</button>
<script type="text/javascript">
function foo() {
var button = document.getElementById("button1");
button.innerText = "<strong>my text</strong>"
}
</script>
</body>
Note: Firefox doesn't support innerText, but has its own property called textContent, which can be used instead.