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.
Related
My code is supposed to change the text of a paragraph.
The code- (both .js and .html files)
<!DOCTYPE html>
<html>
<head>
<title>Java's Crypt</title>
</head>
<body>
<p Id="bello">i will change</p>
<button type="button" onclick="myFunction()">click to change</button>
<script src="crypt.js"></script>
</body>
</html>
(javascript file)
function myFunction() {
document.getElementById("bello").innerhtml = "toldya";
}
First there is id not Id in HTML
<p id="bello">i will change</p>
and in JS, You can use textContent or innerText to change text
document.getElementById("bello").textContent = "toldya";
function myFunction() {
document.getElementById("bello").textContent = "toldya";
}
<p id="bello">i will change</p>
<button type="button" onclick="myFunction()">click to change</button>
As per Jax-p's comment, document.getElementById("bello").innerText = "toldya"; should work.
Also, it is best practice to use lower case for your html attributes e.g. Id should just be id
So I need some help, I am new to JS and I need to to find a solution to the problem I am having. I am trying to create a button when it clicks changes a piece of text. When I create a JS function in the script tag header and reference the function in the button onclick it works, but it doesn't work in a separate JS file. The HTML code is below. Hopefully, someone can help me.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="changetext.js"></script>
<script>
function Button() {
document.getElementById("demo").innerHTML = "hello";
}
</script>
<script>
function Button2() {
document.getElementById("demo").innerHTML = "hi";
}
</script>
</head>
<body>
<p id="demo"> hi</p>
<button id="ButtonText" onclick="Button()"> Click Here To Change The Text</button>
<button id="ButtonText2" onclick="Button2()"> Click Here To Change The Text Back</button>
<script type="text/javascript" src="changetext.js"></script>
</body>
</html>
this is an example...
<!DOCTYPE html>
<html>
<head>
<title>example</title>
</head>
<body>
<p id="demo"> hi</p>
<button id="ButtonText" onclick="Button()"> Click Here To Change The Text</button>
<button id="ButtonText2" onclick="Button2()"> Click Here To Change The Text Back</button>
<script type="text/javascript" src="changetext.js"></script>
</body>
</html>
first you need remove your script.. we include script only if you dont use a external js.
on your external js(changetext.js)
function Button(){
document.getElementById("demo").innerHTML = "hello from button 1";
}
function Button2(){
document.getElementById("demo").innerHTML = "Hellow from button2";
}
result:
if you dont use a external js the code is this:
<!DOCTYPE html>
<html>
<head>
<title>example</title>
</head>
<body>
<p id="demo"> hi</p>
<button id="ButtonText" onclick="Button();"> Click Here To Change The Text</button>
<button id="ButtonText2" onclick="Button2();"> Click Here To Change The Text Back</button>
<script type="text/javascript" src="changetext.js"></script>
</body>
</html>
<script>
function Button(){
document.getElementById("demo").innerHTML = "hello from button 1";
}
function Button2(){
document.getElementById("demo").innerHTML = "Hellow from button2";
}
</script>
we write the code js in the tag script good luck !!
Write your function in changetext.js and make sure that is in same place as your HTML file.
change onclick to onClick
and remove your script tags in the head
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);
}
I am looking for the JavaScript code that can assist me in getting something similar to the button onclick event. Please take a look at the code below.
Javascript code
<script type='text/javascript'>
function myPopup() {
var overlay = $('<div id="overlay"></div>');
$('.x').click(function() {
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
var obj = document.getElementsByClassName('clickLink');
// alert("name");
myScript = function() {
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
return false;
};
obj[0].addEventListener("click", myScript);
}
</script>
HTML Code
<div class='popup'>
popup content here
</div>
<div id='container'>
<button class='clickLink'>
Click Here to See Popup!
</button>
<!-- this is working 5ne i called class in javascript -->
<button type="submit" onclick='myPopup();'>
Click Here to See Popup!
</button>
<!-- but developers need like onclick event -->
</div>
</body>
This popup script is working fine but I need an onclick event like button onClick='myfunction()'
please any one help me Thanks
If I understand correctly you want to know how onclick event works in JavaScript, if that is the case as your question is not entirely clear, try something to the effect of the following:
<!DOCTYPE html>
<html>
<body>
<p>Click "Try it" to execute the displayDate() function.</p>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").onclick = displayDate;
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
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