This question already has answers here:
How to call multiple JavaScript functions in onclick event?
(14 answers)
Closed 6 years ago.
I'm creating a simple word processor where the user can enter any text in the dedicated text area and press three buttons which will make the text bold, italic and underline it. I've managed to do this so far however it has to undo the changes if the button has been clicked again.
I can't seem to unbold the text even when I insert both functions inside onclick.
<script>
function myFunctionBold() {
document.getElementById("demo").style.fontWeight = "bold";
}
function myFunctionUnBold() {
document.getElementById("demo").style.fontWeight = "normal";
}
function myFunctionItalic() {
document.getElementById("demo").style.fontStyle = "italic";
}
function myFunctionUnderline() {
document.getElementById("demo").style.textDecoration = "underline";
}
</script>
<style>
.buttonsBold {
height: 21px;
cursor: pointer;
display:inline-block;
margin: 5px 4px;
font-weight: bolder;
}
.buttonsItalic {
height: 21px;
cursor: pointer;
display:inline-block;
margin: 5px 4px;
font-style: italic;
}
.buttonsUnderline {
height: 21px;
cursor: pointer;
display:inline-block;
margin: 5px 4px;
text-decoration: underline;
}
</style>
<body>
<p>This is a simple word processor.<br>
Type some text in the text area and press the buttons!
</p>
<form action="textarea">
Enter text here:<br>
<input id="demo" type="text" name="yourText">
</form>
<br>
<button class="buttonsBold" onclick="myFunctionBold(); myFunctionUnBold();" >Bold</p>
<button class="buttonsItalic" onclick="myFunctionItalic()">Italic</p>
<button class="buttonsUnderline" onclick="myFunctionUnderline()">Underline</p>
</body>
</html>
You should generally avoid using inline javascript. The cleaner way would be to use a separate script and addEventListener(), with that you can easily assign as many functions as you wish:
var btn = document.getElementById('btn');
btn.addEventListener('click', doThis);
btn.addEventListener('click', doThat);
function doThis() {
alert("done this");
}
function doThat () {
alert("done that");
}
<button id="btn">Click</button>
You dont need to call two function on click, you can logically concatenate it inside one function,
function toggleBold() {
if(document.getElementById("demo").style.fontWeight == "bold"){
document.getElementById("demo").style.fontWeight = "normal"
}else{
document.getElementById("demo").style.fontWeight = "bold"
}
}
This function will toggle bold.
Demo : https://jsfiddle.net/nvujtne7/
Related
This question already has answers here:
why javascript this.style[property] return an empty string? [duplicate]
(2 answers)
Closed 2 years ago.
i have a div and button i click the button fist time no response and click again and show
function banne() {
var ban = document.getElementById("content");
//consloe.log(ban.style.display === "none");
if (ban.style.display === "none") {
ban.style.display = "block";
} else {
ban.style.display = "none";
}
}
.banner-content {
display: none;
height: 100px;
color: #fff;
background: #1b1b1b;
}
<button class="banner" onclick="banne()"> know </button>
<div class="banner-content" id="content">
Some Data
</div>
here the console value show false value but i write the style inline style="display:none" in div class banner-content it working, why the style sheet value not taken ,any idea?
Javascript can't access the style mentioned in the CSS file with the ban.style.display. You have to use getComputedStyle() method.
window.getComputedStyle(ban, null).getPropertyValue("display");
But in your case I think it is better use a class based toggle maybe like,
CSS
.banner-content {
display: none;
height: 100px;
color: #fff;
background: #1b1b1b;
}
.banner-content.active {
display: block;
}
JS
function banne() {
var ban = document.getElementById("content");
ban.classList.toggle("active");
}
While style doesn't register the stylesheet properties, you can check if the style does not equal to "block" and then set it to block, otherwise none. Also see the difference between getComputedStyle and style: https://developer.mozilla.org/en/DOM/window.getComputedStyle
function banne() {
var ban = document.getElementById("content");
//consloe.log(ban.style.display === "none");
if (ban.style.display !== "block") {
ban.style.display = "block";
} else {
ban.style.display = "none";
}
}
.banner-content {
display: none;
height: 100px;
color: #fff;
background: #1b1b1b;
}
<button class="banner" onclick="banne()"> know </button>
<div class="banner-content" id="content">
Some Data
</div>
It's generally not a good idea to use inline event handlers.
Add a listener to the document. To toggle display, use a separate css class (.visible in the snippet) and toggle that. It makes your life so much easier.
document.addEventListener("click", banne);
function banne(evt) {
if (evt.target.classList.contains("banner")) {
document.querySelector("#content").classList.toggle("visible");
}
}
.banner-content {
display: none;
height: 100px;
color: #fff;
background: #1b1b1b;
}
.banner-content.visible {
display: block;
}
<button class="banner"> know </button>
<div class="banner-content" id="content">
Some Data
</div>
I have a div named #increase-text-weight which says "INCREASE TEXT WEIGHT".
Whenever you click on it, the contents of another div named #post-content should get font-weight: 500 and the text of #increase-text-weight should be changed to "DECREASE TEXT WEIGHT".
When the div says "DECREASE TEXT WEIGHT" and you click on it,
#post-content
should get
font-weight: 300
and the text of
#increase-text-weight
should be changed to "INCREASE TEXT WEIGHT".
How can I do this?
EDIT:
I had tried doing it by getElementById but it didn't work.
Since you are learning, this is a short way to do this with two clases.
First of all, the id selector $('#test') gets the node element
Then attach a click event listener of to the reference.
After, the selector $(this), makes a reference to selector used in the event attached function, in this case we can say $(this) == $("#test").
After the dot, jQuery .toggleClass() method adds or remove a class from the element, also, if you pass a second true or false parameter, the method will add or remove the given class respectively.
So if you chain this two toggleClass() will add the class if it is not there or will remove it if it exist
$("#test").click(function(){ // also can be .on('click',function(){ ... })
$(this).toggleClass("decreased")
.toggleClass("increased");
});
.decreased {
font-weight: 100;
color: red;
cursor: pointer;
}
.increased {
font-weight: 300;
color: green;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" class="decreased">Increase my font weight!</div>
A quick way to do this could be to use and if and else statement.
$('#increase-text-weight').on('click', function() {
if ($(this).text() === 'INCREASE TEXT WEIGHT') {
$('#post-content').addClass('highlight');
$(this).text('DECREASE TEXT WEIGHT');
} else {
$(this).text('INCREASE TEXT WEIGHT');
$('#post-content').removeClass('highlight');
}
});
$('#increase-text-weight').on('click', function() {
if ($(this).text() === 'INCREASE TEXT WEIGHT') {
$('#post-content').addClass('highlight');
$(this).text('DECREASE TEXT WEIGHT');
} else {
$(this).text('INCREASE TEXT WEIGHT');
$('#post-content').removeClass('highlight');
}
});
div {
width: 100%;
height: 100px;
text-align: center;
border: 1px solid;
margin: 0 0 25px 0;
cursor: pointer;
}
.highlight {
font-weight: 900;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='increase-text-weight'>INCREASE TEXT WEIGHT</div>
<div id='post-content'>Text text and text</div>
You can simply do this using an onClick event on the div you want to be changed. Each time it is clicked we check which class is associated with that <div>, and then do the required modifications to that <div> based on the class, like updating the text content inside the div with .text(), and then switching out the classes like so:
var myDiv = $("#test");
myDiv.click(function() {
if (myDiv.hasClass("decreased")) {
myDiv.removeClass("decreased")
.addClass("increased")
.text("Decrease my font weight!")
} else {
myDiv.removeClass("increased")
.addClass("decreased")
.text("Increase my font weight!")
}
});
.decreased {
font-weight: 100;
color: red;
cursor: pointer;
}
.increased {
font-weight: 300;
color: green;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" class="decreased">Increase my font weight!</div>
Although you can easily do this with pure JavaScript like so:
var myDiv = document.getElementById("test");
myDiv.addEventListener("click", function() {
if (myDiv.className === "decreased") {
myDiv.classList.remove("decreased");
myDiv.className = "increased";
myDiv.textContent = "Decrease my font weight!";
} else {
myDiv.classList.remove("increased");
myDiv.className = "decreased";
myDiv.textContent = "Increase my font weight!";
}
});
There is a model at http://www.lesha.wemakesites.ru/.
Once focused at plus icon it is replaced by a button "Follow me".
What I wanna do is to change this button to a red one saying "Unfollow" once it is clicked. It is super if someone knows how to build it reversed too so that when an "Unfollow" button is clicked, it becomes "Follow" one.
Pull in jquery in your project. This cannot be achieved with css alone.
$('#btn').on('click', function() {
if (!$(this).hasClass("followed")) {
$(this).addClass("followed btn-red");
$(this).removeClass("btn-blue");
$(this).html("Followed");
} else {
$(this).addClass("btn-blue");
$(this).removeClass("followed btn-red");
$(this).html("Follow");
}
});
#btn {
border: none;
outline: none;
padding: 10px 12px;
color: #fff;
}
.btn-blue {
background-color: blue;
}
.btn-red {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn" class="btn-blue">Follow</button>
Make the JS as simple as possible to understand.
I would suggest having two versions of the button and you can use
display: none;
for the one that is currently not in use.
If users are switching back between following you can store your state in a variable.
let following = true;
let btn = document.getElementById("btn");
if (!!following) {
btn.style.dispaly = "none";
following = false;
} else {
btn.style.display = "block";
following = false;
}
Great day, I would like to ask for some advise please, im really new to html and css as well as java and putting all of them together is a bit hard for me so, i'm hoping for some advise.
I recently created a form, though i couldn't figure out how to reset all the function, like resetting the contain to its original form after im done copying it.
please the my codes and let me know what i can do. your help is greatly appreciated.
<html>
<head>
<style type="text/css">
/* Some Generic styles */
body {
text-align: center;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
color: #023378;
line-height: 0.5;
background-color:#1E334F;
}
h1 {
margin: 0.5em auto 0.5em;
color: #71A4EB;
}
textarea,
button {
font-size: 1em;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
textarea {
display: block;
margin: 0.5em auto 0.5em;
background: #CAD6E6;
resize: vertical;
}
[id="cleared"] {
margin-top: 4em;
}
textarea:focus {
border-color: #8fa423;
}
button {
position: relative;
padding: 8px 20px;
border: 0;
font-size: 0.835em;
text-transform: uppercase;
letter-spacing: 0.125em;
font-weight: bold;
color: #3F71B6;
background: #7DA9E6;
transition: background .275s;
}
button:hover,
button:focus {
background: #5275A5;
}
p {
margin-top: 3.25em;
font-size: .825em;
color: #777;
font-weight: bold;
letter-spacing: .01em
}
</style>
<h1>SH!N</h1>
<body>
<textarea id="to-copy" cols="80" rows="25" spellcheck="false">
SESA
Caller's Name:
Call back number:
Email Address:
Related case #s (case history):
Location, remote/hotel/office:
Application Name:
Number of Users Affected: Number of Users Affected: (Single User / Less than 5 users / 5 or more users)
What is the issue/problem:
When did the issue/problem begin:
Login id:
Error message (if any):
When was the last time it worked properly:
Have there been any changes to your PC since the last time it worked properly:
Have you changed your password recently:
Troubleshooting steps (detailed):
Additional Detail (links, screen shots etc.. :
</textarea><br>
<button id="copy" type="button">Copy<span class="copiedtext"aria-hidden="true"></span></button>
<textarea id="text" cols="80" rows="8" >
Resolution:
A - problem:
B - cause:
C - actions:
D - resolution:
</textarea><br>
<button onclick="copy()">Copy</button><br>
<SCRIPT TYPE="text/javascript">
var toCopy = document.getElementById( 'to-copy' ),
btnCopy = document.getElementById( 'copy' );
btnCopy.addEventListener( 'click', function(){
toCopy.select();
if ( document.execCommand( 'copy' ) ) {
btnCopy.classList.add( 'copied' );
var temp = setInterval( function(){
btnCopy.classList.remove( 'copied' );
clearInterval(temp);
}, 600 );
} else {
console.info( 'document.execCommand went wrong…' )
}
return false;
} );
function copy () {
var text = document.getElementById('text');
var range = document.createRange();
range.selectNode(text);
window.getSelection().addRange(range);
document.execCommand('copy');
}
</SCRIPT>
</body>
</html>
In order to make a form, you should not use textarea (or using it only as a part of a form, for instance to make a comment in a blog)
If you want to make a form, you must use form tag
<form id="myForm">Caller's name <input type="text" name="callerName"> ... </form>
https://www.w3schools.com/html/html_forms.asp
And then if you want to reset it, inside javascript :
document.getElementById("myForm").reset();
Your form does have id "myForm", you select this element and use reset() function on it which work on form.
PS: You should put your style in a CSS file and your script in a JS file.
EDIT :
If you want to copy it :
var myForm = document.getElementById('myForm');
var targetForm = document.getElementById('targetForm');
targetForm.innerHTML = myForm.innerHTML;
Offcourse you need to have a form tag with id set to targetForm.
I want to set up a functionality for a button that causes text to appear underneath it on click.
For example, when you click a button that says "Sign up now", text would appear underneath the button that says "Are you a member, yes or no?".
"Yes" and "No" would be links that bring you to a different page depending on how you answer.
My button code so far (just html and styling done):
<a href="/ticket-link" target="_blank" class="ticket-button">Sign Up
Now</a>
I'm new with this kind of functionality so any help would be greatly appreciated!
Thanks!
Adjust the href attribute as you want.
$('#btn').click(function() {
$('#modal').fadeIn();
});
a {
display: block;
text-decoration: none;
color: white;
background-color: #333;
width: 100px;
padding: 20px;
border-radius: 5px;
margin: 0 auto;
}
#modal {
width: 300px;
height: 120px;
background-color: #ccc;
border-radius: 5px;
margin: 0 auto;
display: none;
}
#modal h3 {
text-align: center;
padding: 10px;
}
#modal a {
width: 50px;
display: inline-block;
text-align: center;
margin: 0 auto;
height: 10px;
vertical-align: middle;
line-height: 10px;
}
.btns {
width: 200px;
margin: auto;
}
a:hover {
background-color: #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="/ticket-link" target="_blank" class="ticket-button" id='btn'>Sign Up Now</a>
<div id='modal'>
<h3>Are you a member?</h3>
<div class='btns'>
Yes
No
</div>
</div>
You could use the onClick function to unhide text, or elements, below it.
Sign Up Now
<span style="display:none;" id="text">This is some text :D</span>
simple way:
Sign Up Now
<script>
function confirmSignup(){
if(confirm("Are you sure?"))
{
window.location.href="http://somelocation.com/sign-up";
}
}
</script>
Like #Pety Howell said, you can use the onClick function to unhide the text. Here's a pretty straightforward way to do it with jQuery.
$(function() {
$('.link').on('click', function() {
$('.span').addClass('open');
});
});
.span {
display: none;
}
.open {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click me
<span class="span">I'm hidden!</span>
Working fiddle: https://jsfiddle.net/3gr03yzn/4/
You could use jQuery toggle() function.
HTML :
<button id="member">
Are you Member ?
</button>
<div class="answer">
Yes<br />
No
</div>
JS :
$("#member").click(function() {
$(".answer").toggle();
});
CSS :
.answer {
display:none;
}
The working example on jsFiddle.
Hope this helps
Try this code.
please vote if this code helpful to you
function execute(){
var x = document.getElementById('link_list');
var y =document.getElementById('btn');
if(x.style.visibility==="hidden"){
y.style.visibility="hidden";
x.style.visibility="visible";
}
}
<button onclick="execute()" id="btn">sign up</button>
<div id="link_list" style="visibility:hidden">
Are you a member, <button onclick="window.open('http://sparrolite.blogspot.in')">Yes</button> or <button onclick="window.open('google.com')">no</button>
</div>
Most answers mentioned here either uses
jQuery or,
onclick attribute which is obtrusive javascript.
Here's how to achieve the desired behavior using vanilla, unobtrusive JavaScript.
window.onload = function() {
var button = document.querySelector('.ticket-button');
var info = document.querySelector('.info');
info.style.display = 'none';
var dispalyInfo = false;
button.onclick = function(e) {
e.preventDefault(); /* prevent page from navigating to a new page onclick */
if (dispalyInfo) {
info.style.display = 'none';
dispalyInfo = false;
} else {
info.style.display = 'initial';
dispalyInfo = true;
}
}
}
.ticket-button {
display: block;
}
Sign Up Now
<span class="info">Are you a member, yes or no?</span>
References:
Document.querySelector()
HTMLElement.style