So little bit stuck here, I have several buttons that I want to do separate actions. For example of someone clicks the colour green it changes the paragraph text colour to green, I accomplished the first one but I can't seem to work others, what's the correct way to do it?
//JS:
function myFunction() {
var p = document.getElementById("paragraph"); // get the paragraph
document.getElementById("paragraph").style.color = "green";
var p = document.getElementById("paragraph"); // get the paragraph
document.getElementById("Bluecolour").style.color = "blue";
}
<!doctype html>
<html lang="en">
<head>
<title> Change Paratext </title>
<meta charset="utf-8">
<script src="task2.js"></script>
<style>
#paragraph {
padding: 10px;
margin-bottom: 10px;
background-color: silver;
border: 1px dashed black;
width: 90%; /* you can adjust this on Firefox if needed */
height: 200px;
overflow: hidden;
margin-top: 10px;
}
</style>
</head>
<body>
<h1> Ali Rizwan </h1>
<p id="paragraph"> Box changes text based on what colour is clicked <br>
<!-- add your buttons here. All buttons should be in one paragraph -->
</p>
<p id="buttons">
<button type="button" onclick="myFunction()" id="GreenColour">Green</button><!-- Changes text to Green -->
<button type="button" onclick="myFunction()" id="Bluecolour">Blue</button><!-- Changes text to Blue -->
<button type="button" onclick="myFunction()" id="Mono">Mono</button> <!-- Changes text to Mono -->
<button type="button" onclick="myFunction()" id="Sans Serif">Sans Serif</button> <!-- Changes text to Sans Serif -->
<button type="button" onclick="myFunction()" id="Serif">Serif</button> <!-- Changes text to Serif -->
<button type="button" onclick="myFunction()" id="SizeAdd">Size++</button> <!-- This button increases size by 1 every time its clicked -->
<button type="button"onclick="myFunction()" id="SizeMinus">Size--</button> <!-- This button decreases size by 1 every time its clicked -->
</p>
</div>
</body>
</html>
Your myFunction() doesn't know what it need to do when it has been called.
Try this entry level code, simply declare few function to change the text color:
function blue() {
var p = document.getElementById("paragraph"); // get the paragraph
p.style.color= 'blue'
}
function green() {
var p = document.getElementById("paragraph"); // get the paragraph
p.style.color= 'green'
}
function mono(){
var p = document.getElementById("paragraph"); // get the paragraph
p.style.fontFamily = "monospace"
}
<!doctype html>
<html lang="en">
<head>
<title> Change Paratext </title>
<meta charset="utf-8">
<script src="task2.js"></script>
<style>
#paragraph {
padding: 10px;
margin-bottom: 10px;
background-color: silver;
border: 1px dashed black;
width: 90%; /* you can adjust this on Firefox if needed */
height: 100px;
overflow: hidden;
margin-top: 10px;
}
</style>
</head>
<body>
<h1> Ali Rizwan </h1>
<p id="paragraph"> Box changes text based on what colour is clicked <br>
<!-- add your buttons here. All buttons should be in one paragraph -->
</p>
<p id="buttons">
<button type="button" onclick="green()">Green</button><!-- Changes text to Green -->
<button type="button" onclick="blue()">Blue</button><!-- Changes text to Blue -->
<button type="button" onclick="mono()">Mono</button><!-- Changes text to monospace-->
</p>
</div>
</body>
</html>
There are different ways to do that,
name distinct function name for distinct button id and set the background according to that
call the same function but this time inside the function pass a parameter of button ID
button type="button" onclick="myFunction(this.id)" id="GreenColour">Green
and the function is:
function myFunction(id) {
if(id=="GreenColour")
document.getElementById("paragraph").style.color="green"; // get the paragraph
//document.getElementById("paragraph").style.color = "green";
else if(id=="BlueColour")
document.getElementById("paragraph").style.color=blue; // get the paragraph
//document.getElementById("Bluecolour").style.color = "blue";
}
You could separate the logic into different functions and pass values as arguments to them:
const paragraph = document.getElementById("paragraph");
let fontSize = 1;
function setStyle(style, value) {
paragraph.style[style] = value;
}
function incrementSize(value) {
fontSize += value
paragraph.style.fontSize = `${fontSize}em` ;
}
<!doctype html>
<html lang="en">
<head>
<title> Change Paratext </title>
<meta charset="utf-8">
<script src="task2.js"></script>
<style>
#paragraph {
padding: 10px;
margin-bottom: 10px;
background-color: silver;
border: 1px dashed black;
width: 90%; /* you can adjust this on Firefox if needed */
height: 200px;
overflow: hidden;
margin-top: 10px;
}
</style>
</head>
<body>
<h1> Ali Rizwan </h1>
<p id="paragraph"> Box changes text based on what colour is clicked <br>
<!-- add your buttons here. All buttons should be in one paragraph -->
</p>
<p id="buttons">
<button type="button" onclick="setStyle('color', 'green')" id="GreenColour">Green</button><!-- Changes text to Green -->
<button type="button" onclick="setStyle('color', 'blue')" id="Bluecolour">Blue</button><!-- Changes text to Blue -->
<button type="button" onclick="setStyle('font-family', 'monospace')" id="Mono">Mono</button> <!-- Changes text to Mono -->
<button type="button" onclick="setStyle('font-family', 'sans-serif')" id="Sans Serif">Sans Serif</button> <!-- Changes text to Sans Serif -->
<button type="button" onclick="setStyle('font-family', 'serif')" id="Serif">Serif</button> <!-- Changes text to Serif -->
<button type="button" onclick="incrementSize(+0.1)" id="SizeAdd">Size++</button> <!-- This button increases size by 1 every time its clicked -->
<button type="button"onclick="incrementSize(-0.1)" id="SizeMinus">Size--</button> <!-- This button decreases size by 1 every time its clicked -->
</p>
</div>
</body>
</html>
Updated code using SWITCH case
//JS:
function myFunction(btnColor) {
var p = document.getElementById("paragraph"); // get the paragraph
switch(btnColor){
case 'green':
document.getElementById("paragraph").style.color = "green";
break;
case 'blue':
document.getElementById("paragraph").style.color = "blue";
break;
case 'mono':
document.getElementById("paragraph").style.color = "mono";
break;
case 'sansserif':
document.getElementById("paragraph").style.fontFamily = "Sans Serif";
break;
case 'serif':
document.getElementById("paragraph").style.fontFamily = "serif";
break;
case 'sizeadd':
var el = document.getElementById('paragraph');
var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
var fontSize = parseFloat(style);
el.style.fontSize = (fontSize + 1) + 'px';
document.getElementById("paragraph").style.fontSize = "serif";
break;
case 'sizeminus':
var el = document.getElementById('paragraph');
var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
var fontSize = parseFloat(style);
el.style.fontSize = (fontSize - 1) + 'px';
break;
}
}
#paragraph {
padding: 10px;
margin-bottom: 10px;
background-color: silver;
border: 1px dashed black;
width: 90%; /* you can adjust this on Firefox if needed */
height: 20px;
overflow: hidden;
margin-top: 10px;
}
<!doctype html>
<html lang="en">
<body>
<h1> Ali Rizwan </h1>
<p id="paragraph"> Box changes text based on what colour is clicked <br>
<!-- add your buttons here. All buttons should be in one paragraph -->
</p>
<p id="buttons">
<button type="button" onclick="myFunction('green')" id="GreenColour">Green</button><!-- Changes text to Green -->
<button type="button" onclick="myFunction('blue')" id="Bluecolour">Blue</button><!-- Changes text to Blue -->
<button type="button" onclick="myFunction('mono')" id="Mono">Mono</button> <!-- Changes text to Mono -->
<button type="button" onclick="myFunction('sansserif')" id="Sans Serif">Sans Serif</button> <!-- Changes text to Sans Serif -->
<button type="button" onclick="myFunction('serif')" id="Serif">Serif</button> <!-- Changes text to Serif -->
<button type="button" onclick="myFunction('sizeadd')" id="SizeAdd">Size++</button> <!-- This button increases size by 1 every time its clicked -->
<button type="button"onclick="myFunction('sizeminus')" id="SizeMinus">Size--</button> <!-- This button decreases size by 1 every time its clicked -->
</p>
</div>
</body>
</html>
the easiest way is to create function with parameter like myFunction(name, value)
var fontSize = 12;
function myFunction(name, value) {
var p = document.getElementById("paragraph");
if (value == 'SizeAdd') {
fontSize += 2;
value = fontSize + 'px';
}
if (value == 'SizeMinus') {
fontSize -= 2;
value = fontSize + 'px';
}
p.style[name] = value;
}
<p id="paragraph"> Box changes text based on what colour is clicked <br>
<!-- add your buttons here. All buttons should be in one paragraph -->
</p>
<p id="buttons">
<button type="button" onclick="myFunction('color', 'green')">Green</button>
<button type="button" onclick="myFunction('color', 'blue')">Blue</button>
<button type="button" onclick="myFunction('fontFamily', 'Mono')">Mono</button>
<button type="button" onclick="myFunction('fontFamily', 'Sans-Serif')">Sans Serif</button>
<button type="button" onclick="myFunction('fontFamily', 'Serif')">Serif</button>
<button type="button" onclick="myFunction('fontSize', 'SizeAdd')">Size++</button>
<button type="button" onclick="myFunction('fontSize', 'SizeMinus')">Size--</button>
</p>
First of all, for caching reasons, it's best to use external CSS and JavaScript. Just make sure you change your CSS and JavaScript file names every time you update the code when you go live. Also, it's a best practice to separate your HTML, CSS, and JavaScript.
Here is some code showing you how to change colors. It should be easy to see that you can just change the paraColor argument, following the design pattern below, to get the results you seek.
//<![CDATA[
/* js/external.js */
var doc, bod, htm, M, I, S, Q, paraColor; // for use on other loads
addEventListener('load', function(){
doc = document; bod = doc.body; htm = doc.documentElement;
M = function(tag){
return doc.createElement(tag);
}
I = function(id){
return doc.getElementById(id);
}
S = function(selector, within){
var w = within || doc;
return w.querySelector(selector);
}
Q = function(selector, within){
var w = within || doc;
return w.querySelectorAll(selector);
}
var para = I('paragraph'), pS = para.style;
paraColor = function(color){
pS.color = color;
}
I('greenColor').addEventListener('click', function(){
paraColor('green');
});
I('blueColor').addEventListener('click', function(){
paraColor('blue');
});
}); // load end
//]]>
/* css/external.css */
html,body{
padding:0; margin:0;
}
.main{
width:980px; margin:0 auto;
}
#paragraph{
height:100px; background-color:silver; padding:10px; border:1px dashed black;
margin:10px 0; overflow:hidden;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
<title>Paratext</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script src='js/external.js'></script>
</head>
<body>
<div class='main'>
<h1>Ali Rizwan</h1>
<p id='paragraph'>Box changes text based on what color is clicked</p>
<p id='buttons'>
<input type='button' id='greenColor' value='Green' />
<input type='button' id='blueColor' value='Blue' />
</p>
</div>
</body>
</html>
Here is the full version of all buttons working, you can use switch case so you can use the same code for multiple buttons. I have used switch case
function myFunction(actionType,actionValue,currentButton) {
var increaseDecreaseFactor = 5;
switch (actionType) {
case 'color':
document.getElementById("paragraph").style.color = actionValue;
currentButton.style.color = actionValue;
break;
case 'increaseFont':
txt = document.getElementById("paragraph");
style = window.getComputedStyle(txt, null).getPropertyValue('font-size');
currentSize = parseFloat(style);
txt.style.fontSize = (currentSize + increaseDecreaseFactor) + 'px';
break;
case 'decreaseFont':
txt = document.getElementById("paragraph");
style = window.getComputedStyle(txt, null).getPropertyValue('font-size');
currentSize = parseFloat(style);
txt.style.fontSize = (currentSize - increaseDecreaseFactor) + 'px';
break;
case 'changeFont':
document.getElementById("paragraph").style.fontFamily = actionValue;
break;
default:
break;
}
}
#paragraph {
padding: 10px;
margin-bottom: 10px;
background-color: silver;
border: 1px dashed black;
width: 90%; /* you can adjust this on Firefox if needed */
height: 200px;
overflow: hidden;
margin-top: 10px;
}
<h1> Ali Rizwan </h1>
<p id="paragraph"> Box changes text based on what colour is clicked <br>
<!-- add your buttons here. All buttons should be in one paragraph -->
</p>
<p id="buttons">
<button type="button" onclick="myFunction('color','green',this)" id="GreenColour">Green</button><!-- Changes text to Green -->
<button type="button" onclick="myFunction('color','blue',this)" id="Bluecolour">Blue</button><!-- Changes text to Blue -->
<button type="button" onclick="myFunction('increaseFont','size++',this)" id="SizeAdd">Size++</button> <!-- This button increases size by 1 every time its clicked -->
<button type="button"onclick="myFunction('decreaseFont','size--',this)" id="SizeMinus">Size--</button> <!-- This button decreases size by 1 every time its clicked -->
<button type="button" onclick="myFunction('changeFont','monospace',this)" id="Mono">Mono</button> <!-- Changes text to Mono -->
<button type="button" onclick="myFunction('changeFont','Sans-Serif',this)" id="Sans Serif">Sans Serif</button> <!-- Changes text to Sans Serif -->
<button type="button" onclick="myFunction('changeFont','Serif',this)" id="Serif">Serif</button> <!-- Changes text to Serif -->
</p>
</div>
First add below link in your head section.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You can do above things by this way :
$("button").click(function() {
var Id = $(this).attr('id');
if(Id == 'GreenColour'){
$("#"+Id).css('color','green');
}elseif(Id == 'Bluecolour'){
$("#"+Id).css('color','blue');
}elseif(...){
.....
}else(...){
.....
}
});
and so on. You can perform your different operation based on its ids in if else.
You can do it like this
<button type="button" onclick="myFunction()" id="GreenColour" c_name="green">Green</button><!-- Changes text to Green -->
<button type="button" onclick="myFunction()" id="Bluecolour" c_name="blue">Blue</button><!-- Changes text to Blue -->
function myFunction(evn) {
var color = event.currentTarget.getAttribute('c_name');
document.getElementById("paragraph").style.color = color;
event.currentTarget.style.color = color;
}
set the color name in div as attribute and read that attribute in calling function and use it.
So with your help and others that see this I learned this, essentially the button onclick name can be used in JS to change the text colour, define the button id, create a variable and then default JS to change the colour of paragraph.
HTML:
<!doctype html>
<html lang="en">
<head>
<title> Change Paratext </title>
<meta charset="utf-8">
<script src="task2.js"></script>
<style>
#paragraph {
padding: 10px;
margin-bottom: 10px;
background-color: silver;
border: 1px dashed black;
width: 90%; /* you can adjust this on Firefox if needed */
height: 100px;
overflow: hidden;
margin-top: 10px;
}
</style>
</head>
<body>
<h1> Ali Rizwan </h1>
<p id="paragraph"> Box changes text based on what colour is clicked <br>
<!-- add your buttons here. All buttons should be in one paragraph -->
</p>
<p id="buttons">
<button type="button" onclick="green()">Green</button><!-- Changes text to Green -->
<button type="button" onclick="blue()">Blue</button><!-- Changes text to Blue -->
<button type="button" onclick="mono()">Mono</button><!-- Changes text to monospace-->
<button type="button" onclick="sansserif()">Sans Serif</button><!-- Changes text to Sans Serif-->
<button type="button" onclick="serif()">Serif</button><!-- Changes text to Serif-->
</p>
</div>
</body>
</html>
JS:
function blue() {
var p = document.getElementById("paragraph"); // get the paragraph
p.style.color= 'blue'
}
function green() {
var p = document.getElementById("paragraph"); // get the paragraph
p.style.color= 'green'
}
function mono(){
var p = document.getElementById("paragraph"); // get the paragraph
p.style.fontFamily = 'monospace'
}
function sansserif(){
var p = document.getElementById("paragraph"); // get the paragraph
p.style.fontFamily = 'sans-serif'
}
function serif(){
var p = document.getElementById("paragraph"); // get the paragraph
p.style.fontFamily = 'serif'
}
Related
I am making a google docs like app, and I want the user to be able to select the text, and then change the size to whatever they want. I tried to use variables but it didn't work so I am not sure what to do. Is there any way to allow the user to change the font size and if so how?
Here is the code for the app:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Editor</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<button class="bold" onclick="document.execCommand('bold',false,null);">
𝗕
</button>
<button class="italic" onclick="document.execCommand('italic',false,null);">
𝘐
</button>
<button
class="underline"
onclick="document.execCommand('underline',false,null);"
>
U̲
</button>
<input
type="color"
class="color-picker"
id="colorPicker"
oninput="changeColorText(this.value);"
/>
<label>Select color</label>
<button id="highlight"><mark>Highlight</mark></button>
<fieldset class="userInput" contenteditable="true"></fieldset>
<script>
var boldBtn = document.querySelector(".bold");
var italicBtn = document.querySelector(".italic");
var underlineBtn = document.querySelector(".underline");
var colorPicker = document.querySelector(".color-picker");
var highlightBtn = document.querySelector("#highlight");
boldBtn.addEventListener("click", function () {
boldBtn.classList.toggle("inUse");
});
italicBtn.addEventListener("click", function () {
italicBtn.classList.toggle("inUse");
});
underlineBtn.addEventListener("click", function () {
underlineBtn.classList.toggle("inUse");
});
highlightBtn.addEventListener("click", function () {
highlightBtn.classList.toggle("inUse");
});
const changeColorText = (color) => {
document.execCommand("styleWithCSS", false, true);
document.execCommand("foreColor", false, color);
};
document
.getElementById("highlight")
.addEventListener("click", function () {
var range = window.getSelection().getRangeAt(0),
span = document.createElement("span");
span.className = "highlight";
span.appendChild(range.extractContents());
range.insertNode(span);
});
</script>
</body>
</html>
I think this is the output you want. Also, don't use document.execCommand, it has been deprecated
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Editor</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<button class="bold" onclick="document.execCommand('bold',false,null);">
𝗕
</button>
<button class="italic" onclick="document.execCommand('italic',false,null);">
𝘐
</button>
<button
class="underline"
onclick="document.execCommand('underline',false,null);"
>
U̲
</button>
<input
type="color"
class="color-picker"
id="colorPicker"
oninput="changeColorText(this.value);"
/>
<label>Select color</label>
<button id="highlight"><mark>Highlight</mark></button>
<input
type="number"
class="font-size"
id="fontSize"
/>
<label>Select Font Size</label>
<fieldset class="userInput" contenteditable="true"></fieldset>
<script>
var boldBtn = document.querySelector(".bold");
var italicBtn = document.querySelector(".italic");
var underlineBtn = document.querySelector(".underline");
var colorPicker = document.querySelector(".color-picker");
var fontSize = document.querySelector("#fontSize");
var highlightBtn = document.querySelector("#highlight");
var userInput = document.querySelector('.userInput');
boldBtn.addEventListener("click", function () {
boldBtn.classList.toggle("inUse");
});
italicBtn.addEventListener("click", function () {
italicBtn.classList.toggle("inUse");
});
underlineBtn.addEventListener("click", function () {
underlineBtn.classList.toggle("inUse");
});
highlightBtn.addEventListener("click", function () {
highlightBtn.classList.toggle("inUse");
});
const changeColorText = (color) => {
document.execCommand("styleWithCSS", false, true);
document.execCommand("foreColor", false, color);
};
fontSize.addEventListener('input', updateValue);
function updateValue(e) {
userInput.style.fontSize = `${e.target.value}px`;
}
document
.getElementById("highlight")
.addEventListener("click", function () {
var range = window.getSelection().getRangeAt(0),
span = document.createElement("span");
span.className = "highlight";
span.appendChild(range.extractContents());
range.insertNode(span);
});
</script>
</body>
</html>
Add this to your HTML:
<button class="font-smaller">-</button>
<button class="font-bigger">+</button>
Add this to your JS:
const fontSmaller = document.querySelector(".font-smaller");
const fontBigger = document.querySelector(".font-bigger");
let fontSize = 15.5; // play with this number if needed
fontSmaller.addEventListener("click", () => {
document.querySelector(".userInput").style.fontSize = `${fontSize--}px`;
});
fontBigger.addEventListener("click", () => {
document.querySelector(".userInput").style.fontSize = `${fontSize++}px`;
});
Change as needed. This will change the size of the whole text.
You can implement it like this.
// Increase/descrease font size
$('#increasetext').click(function() {
curSize = parseInt($('#content').css('font-size')) + 2;
if (curSize <= 32)
$('#content').css('font-size', curSize);
});
$('#resettext').click(function() {
if (curSize != 18)
$('#content').css('font-size', 18);
});
$('#decreasetext').click(function() {
curSize = parseInt($('#content').css('font-size')) - 2;
if (curSize >= 14)
$('#content').css('font-size', curSize);
});
header {
text-align: center;
}
/* text-controls */
button {
vertical-align: bottom;
margin: 0 0.3125em;
padding: 0 0.3125em;
border: 1px solid #000;
background-color: #fff;
font-weight: bold;
}
button#increasetext {
font-size: 1.50em;
}
button#resettext {
font-size: 1.25em;
}
button#decreasetext {
font-size: 1.125em;
}
.textcontrols {
padding: 0.625em 0;
background: #ccc;
}
/* content */
#content {
margin: 3em 0;
text-align: left;
}
/* demo container */
#container {
width: 90%;
margin: 0 auto;
padding: 2%;
}
#description {
margin-bottom: 1.25em;
text-align: left;
}
#media all and (min-width: 700px) {
#container {
width: 700px;
}
button {
margin: 0 0.625em;
padding: 0 0.625em;
}
}
<div id="container">
<header>
<h1 id="title">
Allow Users to Change Font Size
</h1>
<p>Click the buttons to see it in action</p>
<div class="textcontrols">
<button role="button" id="decreasetext" <span>smaller</span>
</button>
<button role="button" id="resettext">
<span>normal</span>
</button>
<button role="button" id="increasetext">
<span>bigger</span>
</button>
</div>
<!--/.textcontrols-->
</header>
<main id="content" role="main">
<div id="description">
<h2>Allow users to resize text on the page via button controls.</h2>
<p>In this instance, users can decrease text, increase text, or reset it back to normal.</p>
<h2>Set default text size with CSS</h2>
<p>The default text size must be set using an internal stylesheet in the header of your page. In this case: <code>font-size: 1.125em</code> (aka, 18px).</p>
<h2>Set the controls with JavaScript</h2>
<p>Then we set the resize controls with JavaScript. In this example, we're resizing all text within the div with an id of "content".</p>
<p>The controls check the current text size, and then changes it (or not) accordingly.</p>
</div>
<!--/#description-->
</main>
<!--/#content-->
</div>
<!--/#container-->
Ok so it does add, but not right
So my vars think that they are text but I want just the nums, so I can add them together.
How do I do this?
a fiddle to see whats so wrong
<html>
<head>
<title>Nose Clicker</title>
<style>
body{
background-image:url("https://i.pinimg.com/originals/66/27/70/6627703d20110ad2e8877fab5fc102b9.jpg");
}
#root-SuperGloabalVar1{
color: red;
font-size: 150px;
padding: 0px;
}
#var-wrapper{
opacity: 0%;
}
</style>
</head>
<body>
<div id = 'var-wrapper'>
<h1 class = 'vars' id = 'perclick'>
<---here is the first addend--->
1
</h1>
</div>
<---here the second one--->
<h1 id = 'root-SuperGloabalVar1'>0</h1>
<img onclick = '
<---get number 1--->
var v = getElementById("root-SuperGloabalVar1");
<---get number 2--->
var a = getElementById("perclick");
<---adding--->
var w = v.innerHTML+=a.innerHTML;
<---replacing and then it shows "01"--->
v.innerHTML(parrseint(a.innerHTML + v));
'
src = 'https://www.pngitem.com/pimgs/m/155-1559954_cartoon-nose-images-cartoon-nose- image-png-transparent.png'>
</body>
</html>
I didn't completely understand your question can you explain it a bit more and detailed but if you want to parse text into number then use
var x = a.innerHTML;
Number(x)
Edit:
And a proper way to use number increment and display it is like this:
(you don't need to save your integer in an element you can use a javascript variable)
let clicks = 0;
function countClicks() {
clicks++;
const display = document.getElementById("display");
display.innerHTML = clicks;
}
<!DOCTYPE html>
<html lang="en">
<body>
<div style="background: red; width: 100px; height: 100px;" onclick="countClicks();">
</div>
<div style="font-size: 30px;" id="display">0</div>
</body>
</html>
Example to use in onclick callback:
<body>
<script>var clicks = 0;</script>
<div style="background: red; width: 100px; height: 100px;"
onclick=
"
clicks++;
const display = document.getElementById('display');
display.innerHTML = clicks;
">
</div>
<div style="font-size: 30px;" id="display">0</div>
</body>
I am working with Table(Ag-grid). Style of headers is conferrable (can be changed via props) i.e
height/width and Text-aligment can be changed.
Since I don't have access to header height in Each Header cell so I am using flex box in header cells to maintain text alignment(vertical/horizontal) properly.
Now I got a new change request to have one more style to make text(HeaderName) vertical So the user can rotate text for those Header where width is not sufficient. like that enter image description here.
For that I have done changes in HeaderCellRenderer
My Issue Is If I rotate the Text my vertical alignment (top/center/bottom) and horizontal alignment(left/center/right) is not as expected by client. All alignment should work as same as when the text is not rotated.
Please assist me to do so.
This is a plunker link I have attached just to show you how my Header cell is(Its dummy) , and the issue I am facing.
After applying rotate then text align (top/bottom/left/right) system should behave same as with non-rotate.
// Add your code here
function hori(value) {
var x = document.getElementsByClassName("outer");
x[0].style.textAlign = value;
// alert('changed');
}
function vertical(value) {
var x = document.getElementsByClassName("inner");
x[0].style.alignSelf = value;
// alert('changed');
}
function rotate() {
var x = document.getElementsByClassName("inner");
x[0].style.transform = 'rotate(-90deg)';
}
function rotate() {
var x = document.getElementsByClassName("inner");
x[0].style.transform = 'rotate(-90deg)';
}
function Notrotate() {
var x = document.getElementsByClassName("inner");
x[0].style.transform = 'none';
}
/* Add your styles here */
.outer {
text-align : center;
display : flex;
height : 100px;
width : 200px;
background-color : yellow;
color: red;
overflow : hidden;
border : 1px solid black;
}
.inner {
align-self : center;
width : 100%;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
</head>
<body>
<button onclick="rotate()">rotate</button>
<button onclick="Notrotate()">Not rotate</button>
<button onclick="vertical('flex-start')">v-top</button>
<button onclick="vertical('center')">v-center</button>
<button onclick="vertical('flex-end')">v-end</button>
<button onclick="hori('left')">left</button>
<button onclick="hori('center')">center</button>
<button onclick="hori('right')">right</button>
<hr/>
<div class="outer">
<div class="inner">
text
</div>
</div>
</body>
</html>
https://plnkr.co/edit/epE0bXvqePvpS2zL?preview
You have to define a "transform-origin" and remove the "width: 100%" then you have to move your inner container with flex properties (justify-content)
// Add your code here
function hori(value) {
var x = document.getElementsByClassName("outer");
x[0].style.justifyContent = value;
// alert('changed');
}
function vertical(value) {
var x = document.getElementsByClassName("inner");
x[0].style.alignSelf = value;
// alert('changed');
}
function rotate() {
var x = document.getElementsByClassName("inner");
x[0].style.transform = 'rotate(-90deg)';
}
function rotate() {
var x = document.getElementsByClassName("inner");
x[0].style.transform = 'rotate(-90deg)';
}
function Notrotate() {
var x = document.getElementsByClassName("inner");
x[0].style.transform = 'none';
}
.outer {
text-align : center;
display : flex;
height : 100px;
width : 200px;
background-color : yellow;
color: red;
border : 1px solid black;
}
.inner {
align-self : center;
transform-origin: center;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
</head>
<body>
<button onclick="rotate()">rotate</button>
<button onclick="Notrotate()">Not rotate</button>
<button onclick="vertical('flex-start')">v-top</button>
<button onclick="vertical('center')">v-center</button>
<button onclick="vertical('flex-end')">v-end</button>
<button onclick="hori('flex-start')">left</button>
<button onclick="hori('center')">center</button>
<button onclick="hori('flex-end')">right</button>
<hr/>
<div class="outer">
<div class="inner">
text
</div>
</div>
</body>
</html>
I have a button and it should increase the font size when clicked and if it's clicked again it should decrease the font. Also the value of the button should change to Increase Font / Decrease Font. So, basically I want to make the button toggle from increasing the font to 16px then decreasing to 14px if clicked again.
EDIT: I made it work but it doesn't keep repeating. Only works twice and that's it
HTML
<p id="increase">Lorem Ipsum.</p>
<input onclick="font()" style="background-color:#72cf26" type="submit" value="Increase Font" id = "fontbutton"/>
JS
function font(){
var fontsize = document.getElementById('increase');
var fontbutton = document.getElementById('fontbutton');
if (fontbutton.value == "Increase Font"){
fontsize.classList.add("font16");
document.getElementById('fontbutton').value = "Decrease Font";
}else if (fontbutton.value == "Decrease Font"){
fontsize.classList.add("font14");
document.getElementById('fontbutton').value = "Increase Font";
}
}
CS
.font16{
font-size:16px;
}
.font14{
font-size: 14px;
}
You should use fontbutton.value instead of fontbutton.getElementById.value and remove the previous class using fontsize.classList.remove to add the new one using fontsize.classList.add:
function font(){
var fontsize = document.getElementById('increase');
var fontbutton = document.getElementById('fontbutton');
if (fontbutton.value == "Increase Font"){
fontsize.classList.remove("font14");
fontsize.classList.add("font16");
fontbutton.value = "Decrease Font";
}else if (fontbutton.value == "Decrease Font"){
fontsize.classList.remove("font16");
fontsize.classList.add("font14");
fontbutton.value = "Increase Font";
}
}
.font16{
font-size:16px;
}
.font14{
font-size: 14px;
}
<p id="increase" class="font14">Lorem Ipsum.</p>
<input onclick="font()" style="background-color:#72cf26" type="submit" value="Increase Font" id = "fontbutton"/>
The above requirement can be implemented using
element.classlist.add and element.classlist.remove functions.
Here is a copy of the working code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.font16{
font-size:16px;
background-color:#72cf26;
}
.font14{
font-size: 14px;
background-color:#72cf26;
}
</style>
</head>
<body>
<p id="increase">Lorem Ipsum.</p>
<button id="fontbutton" class="font14" onclick="toggleFont()">
Increase Font
</button>
<script>
function toggleFont() {
var element = document.getElementById("fontbutton")
var buttonText = element.innerHTML
element.classList.remove("font14")
element.classList.remove("font16")
if(buttonText.indexOf("Increase") >= 0) {
element.classList.add("font16")
element.innerHTML = "Decrease font"
} else {
element.classList.add("font14")
element.innerHTML = "Increase font"
}
}
</script>
</body>
</html>
Output:
More information:
https://www.w3schools.com/howto/howto_js_toggle_class.asp
$(document).ready(function(){
var flag = true;
$('.btn').click(function(){
$(this).find('span').toggleClass('hidden');
if(flag) {
$('#increase').addClass('font16');
$('#increase').removeClass('font14');
flag = !flag;
}else {
$('#increase').removeClass('font16');
$('#increase').addClass('font14');
flag = !flag;
}
});
});
.font16{
font-size:16px;
}
.font14{
font-size: 14px;
}
.hidden {
display: none;
}
p{ font-size: 10px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="increase">Lorem Ipsum.</p>
<button class="btn">
<span>Increse Font</span>
<span class="hidden">Decrese Font</span>
</button>
Your approach is complicated, JS directly offers a toggle method to add / delete a class and which returns a boolean value.
The only difficulty is that you should not forget to add !important to upgrade the size.
const paragraphInc = document.getElementById('increase')
, buttonSize = document.getElementById('fontbutton')
;
buttonSize.onclick = () =>
{
buttonSize.textContent = (paragraphInc.classList.toggle('Size16'))
? 'Decrease Font'
: 'Increase Font'
}
#fontbutton {
background-color:#72cf26;
padding: 7px 12px;
}
#increase {
font-size: 14px;
}
.Size16 {
font-size: 16px !important;
}
<p id="increase">Lorem Ipsum.</p>
<button id="fontbutton">Increase Font</button>
I use these flashcards quite regularly. Lately, I have been using pictures as answers. However -I cannot hide the pictures. I would like for the pictures to be hidden upon webpage startup.
function myShowText(id) {
document.querySelector('#' + id + ' .answer').style.color = 'black';
}
function myHideText(id) {
document.querySelector('#' + id + ' .answer').style.color = 'white';
}
.answer {
border-style: solid;
border-color: #287EC7;
color: white;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Flashcards VBA </title>
<rel="stylesheet" href="css/styles.css">
</head>
<body>
<script src="js/scripts.js"></script>
<h3> Flashcards </h3>
<p class="question">
The first question
</p>
<div id="bash_start">
<p class="answer">
<img src="image.jpg">
</p>
</div>
</body>
</html>
Just add the following CSS class:
.hidden {
display: none;
}
and add the class .hidden to your answer:
<p class="answer hidden">
<img src="image.jpg">
</p>
Then remove this .hidden class whenever your want to show the answer:
document.querySelector('.answer').classList.remove('hidden');
Here is a working example:
var button = document.querySelector('button');
var answer = document.querySelector('.answer');
button.addEventListener('click', function() {
answer.classList.remove('hidden');
});
.hidden {
display: none;
}
<button type="button">Show answer</button>
<p class="answer hidden">This is the answer</p>
If I understand correctly you just want your image to be hidden when the user load the page ? In that case juste put somme css on your image(s) visibility: hidden; or display: none;
Then Javascript/Jquery side you do whatever event you want to fire it and change visibility: visible; or display: block/inline-block;.
<img class="flashCards" src="https://cdn4.iconfinder.com/data/icons/champions-1/512/Champions-04-512.png">
<button id="validate_btn" onclick="validate()">Validate</button>
<style>
img.flashCards { width: 150px; visibility: hidden; }
</style>
<script>
function validate() {
var flashCards = document.getElementsByClassName('flashCards');
//Need a for loop for each image element
//If only one image use getElementById directly with the style
for(i=0;i<flashCards.length;i++) {
flashCards[i].style.visibility = 'visible';
flashCards[i].style.backgroundColor = 'green';
}
}
</script>