Create 4 buttons, each to modify a paragraph. Each button should turn on or off the changes to the paragraph on each click of the button.
1. Toggle bold button should bold the paragraph.
2. Toggle position should change the position of the paragraph
3. Toggle color will change the color
4. Toggle size will change the size.
My code till now:`
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p>Click the button to bold the text of the DIV element:</p>
<p><button onclick="myFunction()">Toggle Bold</button></p>
<div id="myDIV">Hello</div>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.innerHTML === "Hello") {
x.innerHTML = ;
} else {
x.innerHTML = "Hello";
}
}
</script>
</body>
</html>
Now, here I do not know how to change the paragraph text to bold in this. Moreover, I have to use the event handler for 4 buttons. How can I do it?
You can use the button to toggle the bold-ness of the paragraph by toggling the font-weight style.
function myFunction() {
var div = document.getElementById("myDIV");
if (div.style['font-weight']) {
div.style.removeProperty('font-weight');
} else {
div.style['font-weight'] = 800;
}
}
<p>Click the button to bold the text of the DIV element:</p>
<p><button onclick="myFunction()">Toggle Bold</button></p>
<div id="myDIV">Hello</div>
for the handling of four buttons with one function part you can do something like this.
as you create four buttons for each paragraph. modify the onclick event like
<p><button onclick="myFunction('myDiv')">Toggle Bold</button></p>
Here you are passing the ID of the paragraph controlled by the given button to the function
and modify the event handler with a div paramter like
function myFunction(asdf) {
var x = document.getElementById(asdf);
----your function----
}
Related
This question already has answers here:
How do I call a JavaScript function on page load?
(8 answers)
Closed 1 year ago.
I'm making a prank .html page for a friend. The prank was, you would push a button and a phrase would pop up under the button. I figured out a way to hide the phrase and unhide it. The problem is that, when you load into the page, the phrase would already be on the screen. How do I keep it hidden on page load?
function Function() {
var x = document.getElementById("urmom");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
<button onclick="Function()">Try it</button>
<div id="urmom">
ur mom
</div>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
Set with CSS first as NONE.
function Function() {
var x = document.getElementById("urmom");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
<button onclick="Function()">Try it</button>
<div id="urmom" style="display:none">
ur mom
</div>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
</body>
</html>
I am using html, css and javascript to create a read more button. I have a paragraph and if this button is pressed, more text will de displayed.
This is my html code
<p class="details">Text that is displayed><span class="read-more">More text</span></p>
<button class="read-more-button">Read more</button>
//on the bottom of the page I also added the scripts
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
In my css file I make the paragraph between the span tag not visible
.details .read-more{
display:none;
}
In my javascript
const readMoreBtn = document.querySelector('.read-more-button');
const text = document.querySelector('.details');
readMoreBtn.addEventListener('click',(e)=>{
details.classList.toggle('read-more');
})
The problem is that when I press the Read more button nothing happens, the paragraph between the span tag is not displayed. Am I missing something here?
You need to target .read-more class, not .details.
Also, there is a undefined variable in event listener.
The correct JS code should be:
const readMoreBtn = document.querySelector('.read-more-button');
const text = document.querySelector('.read-more');
readMoreBtn.addEventListener('click',(e)=>{
text.classList.toggle('read-more');
})
You're toggling the class of p.details. You should toggle the class of `.read-more'.
const readMoreBtn = document.querySelector('.read-more-button');
const moreText = document.querySelector('.read-more');
readMoreBtn.addEventListener('click',(e) => {
moreText.classList.toggle('read-more');
// Consider changing the button text to collapse or removing it altogether perhaps?
})
.details .read-more{
display:none;
}
<p class="details">Text that is displayed<span class="read-more">More text</span></p>
<button class="read-more-button">Read more</button>
I'm rather new to programming, but let's keep going. My goal is to create a button that when pressed it will print out text. If you press a second time, it will print out text below the original snippet and so on. Basically, if you keep clicking the button you'll get text repeated a number of times below each other. Currently I've achieved a button that when pressed it prints out text. Press it again and it does nothing. Here's the code I used:
<input type="button" value="Duplicate Text" onclick="dup()"/>
<p id="clone"></p>
<script>
function dup() {document.getElementById("clone").innerHTML="Text";}
</script>
I'm sure I've done something wrong. Thanks a million.
If you're convinced that it should work, try it. It WILL print out text, but then when you do it a second time, it does nothing.
The below example is self explanatory
DEMO http://jsfiddle.net/YzqML/
<script>
function myFunction() {
var h = document.createElement("p");
var t = document.createTextNode("Hello World");
h.appendChild(t);
document.body.appendChild(h);
}
</script>
<p id="demo">Click the button to make more text within a "p" tag.</p>
<button onclick="myFunction()">Try it</button>
Another example with checkbox and label
DEMO http://jsfiddle.net/YzqML/1/
<script>
function myFunction() {
var div = document.getElementById('myItems'),
clone = div.cloneNode(true);
document.body.appendChild(clone);
}
</script>
<div id="myItems">
<label>My Label</label>
<input type="checkbox" />
</div>
<p id="demo">Click the button to clone the above items</p>
<button onclick="myFunction()">Try it</button>
You can create new elements and append them to the DOM, like this:
function display(msg) {
var p = document.createElement('p');
p.innerHTML = String(msg);
document.body.appendChild(p);
}
Each time you call the display function, the string you give it is added to a new paragraph (p element) on the page, which is added to the bottom of the body.
I note a jquery tag in your question , so you can do this :
<input type="button" value="Duplicate Text" onclick="$('<p />').appendTo('body')"/>
DEMO :
http://jsfiddle.net/abdennour/GZu38/1/
Copy paste this code in an html file and run in a browser. If you could include Jquery, then more simpler the code would be.
<html>
<head>
<script>
function myFunction() {
var h = document.createElement("p");
var t = document.createTextNode("Hello World");
h.appendChild(t);
document.body.appendChild(h);
}
</script>
</head>
<body>
<p id="demo">Click the button to make more text within a "p" tag.</p>
<button onclick="myFunction()">Try it</button>
</body>
</html>
I was working on a project that I need a hidden input field to take user input.
I have javascript in place to focus always on the input field. When the div is visible I can see typing. When I hide the div type and make the div visible again I do not see any change. How can I make it so when the div is hidden, it will still take user input? Really, if there is another way besides hiding, that would be great.
<html>
<body>
<div id="diva">
<input name="geta" id="geta" type="text" onkeypress="javascript:geta.focus();" onKeyUp="javascript:geta.focus();" OnBlur="javascript:geta.focus();" OnChange="javascript:geta.focus();" />
</div>
<button onClick="javascript:change();">Show/Hide Div</button>
<script language="javascript" type="text/javascript">
<!--
function change() {
var div = document.getElementById('diva');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
geta.focus();
// -->
</script>
</body>
</html>
Fixed copy using Jeffman's idea:
<html>
<head>
<style>
input {
position: absolute;
left: -999em;
}
</style>
</head>
<body>
<input name="geta" id="geta" type="text" onkeypress="javascript:geta.focus();" onKeyUp="javascript:geta.focus();" OnBlur="javascript:geta.focus();" OnChange="javascript:geta.focus();" />
<button onClick="javascript:show();">Show</button><button onClick="javascript:hide();">Hide</button>
<script language="javascript" type="text/javascript">
<!--
function hide() {
document.getElementById('geta').style.position = 'absolute';
document.getElementById('geta').style.left = '-999em';
}
function show() {
document.getElementById('geta').style.position = 'absolute';
document.getElementById('geta').style.left = '10em';
}
geta.focus();
// -->
</script>
</body>
</html>
Are you just trying to make it so any user input is captured to a hidden input field?
If so you can add a onkeyup trigger to the document, and for every keyup, modify the hidden input field.
Otherwise, once you have hidden an element it would loses focus.
Simple example:
I don't know if you are using jQuery, so here is a very native, simple solution, put in your head tag
document.onkeyup = function(e) {
var input = document.getElementById('myinput');
if (input.style.display == 'none') {
input.value += String.fromCharCode(e.keyCode || e.which);
}
};
I don't think it's possible to type in a text field when it's hidden. What is your use case?
I have a webpage that has a link set to change the background colour of the page, the colour of the link, & the link text. Here is my code:
<html>
<head>
<title>Title</title>
<script type="text/javascript">
function Lights() {
document.body.style.backgroundColor='#000000';
document.getElementById("on").innerHTML="Turn on the lights";
document.getElementById("on").style.color="#00ffff";
}
</script>
</head>
<body style="font-size:200px; text-align:center;">
Turn off the lights
</body>
</html>
I was wondering how I would set the JavaScript to reverse those statements when the link is clicked again so the page is back to the white background, the text is back to "Turn off the lights", & the link is back to the darker blue.
Thank you
You can use a variable to store the state and toggle based off that.
<script type="text/javascript">
var toggle = false;
function Lights() {
var link = document.getElementById("on");
document.body.style.backgroundColor= toggle ? '#ffffff' : '#000000';
link.innerHTML=toggle ? "Turn off the lights": "Turn on the lights";
link.style.color= toggle ? '#000000': "#00ffff";
toggle = !toggle;
}
</script>
You can toggle the settings based on a class value:
<a ... class="lightsOn" onclick="Lights(this);" ...>Turn off the lights</a>
then:
function lights(element) {
if (element.className == 'lightsOn') {
element.className = 'lightsOff';
// do settings for lights off
} else {
element.className = 'lightsOn';
// do settings for lights on
}
}
Most of the setting can be assigned to the class in CSS rather than hard coded in the function.
Note that function names starting with a capital letter are, by convention, reserved for constructors, and you shouldn't use an A element if you don't want an A, use a span with appropriate styling:
<style type="text/css">
.clickable {
cursor: pointer;
text-decoration: underline;
font-color: blue;
}
</style>
<span class="clickable" ...> ... </span>