My script is working in jsFiddle but not in my browser? - javascript

I'm new to programming in general. I'm learning HTML/CSS/Javascript atm.
I created a simple script that allow the user to change the font size of the paragraph element.
I tired my code is jsFiddle and it works fine, but when I copied it into an HTML document and started the page. The HTML and CSS are functioning properly, but the problem is: JavaScript is not working. Btw I'm using Chrome as a browser.
Is something wrong with my HTML document..? I'm so confused!
Here is the working jsFiddle: https://jsfiddle.net/o60gtvh8/
My HTML file (Download link / Dropbox):
https://www.dropbox.com/s/tl0npr5omefntv4/Font%20size%20changer.rar?dl=0
HTML file code ( Copy of the code in the HTML file provided in the download link above ):
<!doctype html>
<html>
<head>
<style>
h1 {
color: blue;
font-size: 25px;
margin: 10px;
}
h2 {
color: blue;
font-size: 15px;
margin: 10px;
}
p {
margin: 10px;
}
a {
margin: 10px;
font-size: 15px;
text-decoration: none;
border: 1px solid grey;
background-color: cyan;
color: black;
padding: 3px;
}
</style>
<script>
function sizeChanger(size) {
return function() {
document.body.style.fontSize = size + 'px';
};
}
var size10 = sizeChanger(10);
var size20 = sizeChanger(20);
var size30 = sizeChanger(30);
document.getElementById('size-10px').onclick = size10;
document.getElementById('size-20px').onclick = size20;
document.getElementById('size-30px').onclick = size30;
</script>
</head>
<body>
<h1>Tiger</h1>
<h2>(From Wikipedia, the free encyclopedia)</h2>
<p>The tiger (Panthera tigris) is the largest cat species, most recognizable for
their pattern of dark vertical stripes on reddish-orange fur with a lighter underside.
The species is classified in the genus Panthera with the lion, leopard, jaguar, and snow leopard.
</p>
Font size 10
Font size 20
Font size 30
</body>
</html>

Move your JavaScript to the end of the page before the closing body element. As it stands now you're trying to access elements that don't exist yet. jsFiddle works because by default they wrap the JavaScript code in a window.onload event.
h1 {
color: blue;
font-size: 25px;
margin: 10px;
}
h2 {
color: blue;
font-size: 15px;
margin: 10px;
}
p {
margin: 10px;
}
a {
margin: 10px;
font-size: 15px;
text-decoration: none;
border: 1px solid grey;
background-color: cyan;
color: black;
padding: 3px;
}
<h1>Tiger</h1>
<h2>(From Wikipedia, the free encyclopedia)</h2>
<p>The tiger (Panthera tigris) is the largest cat species, most recognizable for
their pattern of dark vertical stripes on reddish-orange fur with a lighter underside.
The species is classified in the genus Panthera with the lion, leopard, jaguar, and snow leopard.
</p>
Font size 10
Font size 20
Font size 30
<script>
function sizeChanger(size) {
return function() {
document.body.style.fontSize = size + 'px';
};
}
var size10 = sizeChanger(10);
var size20 = sizeChanger(20);
var size30 = sizeChanger(30);
document.getElementById('size-10px').onclick = size10;
document.getElementById('size-20px').onclick = size20;
document.getElementById('size-30px').onclick = size30;
</script>
So there's nothing really wrong with your code (although you should avoid legacy DOM notation like document.body.style.fontSize) -- you're just executing it too early.

Related

Enlarging Arrow Size in Javascript

After pressing the button, the arrow I got is
something like this :
Is there a way for me to increase the size of the arrow so that it is more visible? Thanks for any help.
function ChangetoArrows() {
var str = document.getElementById("Arrows").innerHTML;
var res = str.replace(/undefined|turn-right|turn-slight-left|turn-slight-right|turn-left/gi, function ChangetoArrows(x){
if(x=='undefined'){return x='↑';}
if(x=='turn-right'){return x='→';}
if(x=='turn-slight-right'){return x='→';}
if(x=='turn-left'){return x='←';}
if(x=='turn-slight-left'){return x='←';}
else{return x;}//must need
});
document.getElementById("Arrows").innerHTML = res;
}
.button4{
background-color: Yellow;
color: black;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
<button class="button4" onclick="ChangetoArrows()">ChangetoArrows</button>
HTML code renders as text so you can use font-size to adjust size.
Since it looks like you're putting these into an element with id Arrows you should be able to add this to your css:
#Arrows {
font-size: 30px;
}
→ is an example of HTML unicode. Learn more here: https://www.w3schools.com/charsets/ref_utf_arrows.asp
You can increase the font-size of button. for eg: font-size:25px and add in .button4 class.
You could add a CSS class to the element, which defines a larger font-size: document.getElementById("Arrows").classList.add('big-arrows');
Or you could use Font Awesome arrows, which will be bolder than unicode arrows.
Simply wrap it with span and give css. checkout my snippet, hopefully it can help you in some way. have a nice day
function ChangetoArrows() {
var str = document.getElementById("Arrows").innerHTML;
var res = str.replace(/undefined|turn-right|turn-slight-left|turn-slight-right|turn-left/gi, function ChangetoArrows(x){
if(x=='undefined'){return x='↑';}
if(x=='turn-right'){return x='→';}
if(x=='turn-slight-right'){return x='→';}
if(x=='turn-left'){return x='←';}
if(x=='turn-slight-left'){return x='←';}
else{return x;}//must need
});
document.getElementById("Arrows").innerHTML = '<span class="arrow">'+res+'<span>';
}
.button4{
background-color: Yellow;
color: black;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
.arrow{
font-size:150px;
color:red;
}
<button class="button4" onclick="ChangetoArrows()">ChangetoArrows</button>
<div id="Arrows">turn-right</div>
The others already answered the question, so I'm not going to repeat that. However, in this case I would recommend you to use Material Design - Icons:
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-34 { font-size: 34px; }
.material-icons.md-44 { font-size: 44px; }
.material-icons.md-54 { font-size: 54px; }
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<i class="material-icons md-24">arrow_back</i>
<i class="material-icons md-34">arrow_forward</i>
<i class="material-icons md-44">arrow_upward</i>
<i class="material-icons md-54">arrow_downward</i>
Just add the CSS library to your code and replace with JS like so:
return x='<i class="material-icons md-24">arrow_back</i>';

Clone div based on content of span

There are random number of div's as show below, I am trying to clone these div on click. when cloning I want to change the content to actual content + no of clones it has (based on content of span , not the id or classes of "clone-this")
eg.
If I click the first "chrome" div, since the body already have "chrome (1) and chrome (2)" , div with content "chrome (3)" Should appear .
If I click the 2nd div ie. "Mozilla Firefox", since there is no cloned version, a div with content "Mozilla Firefox (1)" should appear.
and so on.
I tried to make this, but when i clone the count is based on class , not the content . so clicking on "chrome" div will clone "chrome (5)" not "chrome (3)" .
Also in my implementation when i click the "chrome (1)" div, it will clone as "chrome (1)(5)" . I want this to be like "chrome (3)"
how can i achieve this?
note that there will be any number of divs at first. 5 is just for and example.
jsfiddle here
$(document).on('click', '.clone-this', function(){
var CloneContainer = $(this).clone();
var no = $('.clone-this').size();
CloneContainer.html(CloneContainer.html() + " (" + no + ")");
CloneContainer.appendTo('body');
});
.clone-this{
padding: 15px;
width: 100px;
text-align: center;
border: 1px solid #ccc;
margin: 10px auto;
cursor: pointer;
color: #444;
border: 1px solid #ccc;
border-radius: 3px;
font-family: monospace;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clone-this"><span>Chrome</span></div>
<div class="clone-this"><span>Mozilla Firefox</span></div>
<div class="clone-this"><span>Safari</span></div>
<div class="clone-this"><span>Chrome (1)</span></div>
<div class="clone-this"><span>Chrome (2)</span></div>
To accomplish that, you should check "content" of each item and count the number of elements which have same text. But, there is one problem here; each element (for example Chrome, Chrome (1), Chrome (2)) has different content. So, you may split the text using parenthesis or you may use RegEx (recommended).
$(document).on('click', '.clone-this', function(){
var CloneContainer = $(this).clone();
var content = CloneContainer.find('span').html().split(' (')[0];
var no = $(".clone-this:contains('"+content+"')").size();
CloneContainer.html( CloneContainer.html() .split(' (')[0] + " (" + no + ")" );
CloneContainer.appendTo('body');
});
.clone-this{
padding: 15px;
width: 100px;
text-align: center;
border: 1px solid #ccc;
margin: 10px auto;
cursor: pointer;
color: #444;
border: 1px solid #ccc;
border-radius: 3px;
font-family: monospace;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clone-this"><span>Chrome</span></div>
<div class="clone-this"><span>Mozilla Firefox</span></div>
<div class="clone-this"><span>Safari</span></div>
<div class="clone-this"><span>Chrome (1)</span></div>
<div class="clone-this"><span>Chrome (2)</span></div>
On the snippet above, you may see basic version of it. But you MUST consider the "similar content" issue like following.
Chrome
Chrome Mobile
Firefox
Firefox Mobile
Here is another way to get you going. I "trim" the clicked div to its base name and then loop through the divs and get the length of all which contain the same base name.
After that I modify the cloned element to fill in the right count of the cloned element appropriately:
var regExp = /\([0-9]+\)/;
$('.clone-this').click(function(e){
var target = e.target.textContent;
var matches = regExp.exec(target);
var elements = $('.clone-this');
var count = elements.length;
var index = 0;
if (null != matches) {
target = matches.input.substr(0, matches.input.lastIndexOf(" "));
}
for(var i = 0; i < count; i++){
index += (elements[i].textContent.indexOf(target) > -1) ? 1: 0;
}
var CloneContainer = $(this).clone();
CloneContainer.html(CloneContainer.html().split('(')[0] + "(" + index + ")" );
CloneContainer.appendTo('body');
});
.clone-this{
padding: 15px;
width: 100px;
text-align: center;
border: 1px solid #ccc;
margin: 10px auto;
cursor: pointer;
color: #444;
border: 1px solid #ccc;
border-radius: 3px;
font-family: monospace;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clone-this"><span>Chrome</span></div>
<div class="clone-this"><span>Mozilla Firefox</span></div>
<div class="clone-this"><span>Safari</span></div>
<div class="clone-this"><span>Chrome (1)</span></div>
<div class="clone-this"><span>Chrome (2)</span></div>

Anki javascript only appearing in preview

In Anki, I have a note type where one card is effectively a cloze deletion, however I am using other cards at the same time, with the cloze deletion field in it. I've tried to use javascript to replace everything within two '\'s and it appears to work in the preview when editing, but when the card appears during normal use, only the first line appears as plain text. I'm using the desktop linux program for editing, but would also like to be able to use it in AnkiDroid.
So the question is: what's the problem and how can I fix it?
Front Template:
<script>
function showDef() {
document.getElementById("def").innerHTML = '{{Bedeutung 1}}'.replace(/^[^\/]+\/\*!?/, '').replace(/\*\/[^\/]+$/, '');
};
var initial = false;
var beispiel = (function () {/*{{Beispiel 1}}*/}).toString().replace(/^[^\/]+\/\*!?/, '').replace(/\*\/[^\/]+$/, '');
var splitBeispiel = beispiel.split('\\');
document.write(splitBeispiel[0] + "<n id='cloze'>[...]</n>" + splitBeispiel[2]);
</script>
<p onclick="showDef()" id="def">Click to show definition</p>
Styling:
.card {
font-family: arial;
font-size: 20px;
text-align: center;
color: black;
background-color: white;
}
#cloze {
font-family: arial;
font-size: 25px;
text-align: center;
color: blue;
background-color: white;
}
#def {
font-family: arial;
font-size: 15px;
text-align: center;
color: green;
background-color: white;
}
#beispiel {
font-family: arial;
font-size: 15px;
text-align: center;
color: orange;
background-color: white;
}
Back Template:
<script>
var initial = false;
var beispiel = (function () {/*{{Beispiel 1}}*/}).toString().replace(/^[^\/]+\/\*!?/, '').replace(/\*\/[^\/]+$/, '');
var splitBeispiel = beispiel.split('\\');
document.write(splitBeispiel[0] + "<n id='cloze'>" + splitBeispiel[1] +"</n>" + splitBeispiel[2]);
</script>
<hr id=answer>
{{Singular Nominativ}}
The 'Beispiel 1' field in the following example is "ein kirchlicher, ein \gesetzlicher\ Feiertag"
Screenshot of editor preview:
Screenshot of test:
I guess, you should look for the solution here.
Avoid using document.write in your templates and use document.getElementById("HTMLidToReplace").innerHTML = '<b>' + your_var + '</b>';, for example. Hope it helps.

Magic 8 ball in HTML

I am thinking of making a "magic 8 ball" kind of website. I would like a version of the following code that looks more like the helix fossil website.
var answers = [
'Maybe.', 'Certainly not.', 'I hope so.', 'Not in your wildest dreams.',
'There is a good chance.', 'Quite likely.', 'I think so.', 'I hope not.',
'I hope so.', 'Never!', 'Fuhgeddaboudit.', 'Ahaha! Really?!?', 'Pfft.',
'Sorry, bucko.', 'Hell, yes.', 'Hell to the no.', 'The future is bleak.',
'The future is uncertain.', 'I would rather not say.', 'Who cares?',
'Possibly.', 'Never, ever, ever.', 'There is a small chance.', 'Yes!'];
document.getElementById('answerButton').onclick = function () {
var answer = answers[Math.floor(Math.random() * answers.length)];
document.getElementById('answerContainer').innerHTML = answer;
};
p, input, button {
font-family: sans-serif;
font-size: 15px;
}
input {
width: 200px;
}
<p> How can I help you today? </p>
<input type="text" placeholder="enter a question"></input>
<button id="answerButton"> Answer me </button>
<p id="answerContainer"></p>
Also, when I put this into the "insert code" feature in Weebly, it keeps showing the raw code above the elements. Any way I could clean this up or should I just use a different website creator?
I know nothing about CSS.
Below is a snippet that adds some styling to the basic code.
If you want to make a web page out of this, you can put the CSS inside style tags, the JavaScript inside script tags, and the HTML inside body tags.
Like this: right-click on my page and select "View Page Source" (or whatever your browser of choice calls it) to see how the page is organized.
Better yet, if the Weebly file manager allows it, put the CSS and JavaScript into external files and link to them in the HTML file.
window.onload = function () {
var answers = [
'Maybe.', 'Certainly not.', 'I hope so.', 'Not in your wildest dreams.',
'There is a good chance.', 'Quite likely.', 'I think so.', 'I hope not.',
'I would say so.', 'Never!', 'Fuhgeddaboudit.', 'Ahaha! Really?!?', 'Pfft.',
'Sorry, bucko.', 'Hell, yes.', 'Hell to the no.', 'The future is bleak.',
'The future is uncertain.', 'I would rather not say.', 'Who cares?',
'Possibly.', 'Never, ever, ever.', 'There is a small chance.', 'Yes!'];
var container = document.getElementById('answerContainer'),
opacityPercent,
previousAnswer;
function updateOpacity() {
opacityPercent += 1;
container.style.opacity = opacityPercent / 100;
if (opacityPercent < 100) {
window.requestAnimationFrame(updateOpacity);
}
}
function makeVisible() {
container.style.opacity = '0';
opacityPercent = -1;
updateOpacity();
}
opacityPercent = -1;
document.getElementById('questionArea').value = '';
document.getElementById('answerButton').onclick = function () {
while (true) {
var answer = answers[Math.floor(Math.random() * answers.length)];
if (answers.length == 1 || answer != previousAnswer) {
previousAnswer= answer;
break;
}
}
container.className = '';
container.innerHTML = answer;
makeVisible();
};
};
body {
background: #e8e8d6;
color: #333;
}
#wrapper {
width: 600px;
margin: 80px auto;
text-align: center;
}
p, input, button {
font-family: 'Source Sans Pro', sans-serif;
font-size: 24px;
}
#answerContainer {
opacity: 0;
}
p {
padding: 20px 0;
}
input {
width: 500px;
padding: 5px 15px;
background: #fff;
border: 2px solid #ddd;
outline: none;
}
input:focus {
border: 2px solid #888;
}
button {
background: #ffe;
color: #666;
border: 2px solid #666;
border-radius: 8px;
margin-left: 10px;
padding: 5px 15px;
outline: none;
}
button:hover {
background: #ffc;
color: #222;
border: 2px solid #222;
cursor: pointer;
}
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">
<div id="wrapper">
<p> What do you want to know about the future? </p>
<p>
<input id="questionArea" type="text" placeholder="enter a question"></input>
</p>
<p>
<button id="answerButton"> Make a prediction </button>
</p>
<p id="answerContainer"></p>
</div>

Input Field that creates Tags [duplicate]

This question already has answers here:
Input field for Tags separated by comma
(5 answers)
Closed 9 years ago.
I'd like to create an input field that people can type their skills into. When it's displayed on the front end of the site, each skill will be it's own element. So I'd like users to type their skills like this:
skill 1, skill 2, skill 3
and on the front end of the site, it should show like this:
[Skill 1] [Skill 2] [Skill 3].
So the comma separates each skill and then each skill will have some styling applied to it in CSS.
I've tried a few different techniques but non seem to work how I want them to, if someone could help me out here, I'd really appreciate it.
Thanks
Not without JavaScript (added the tags to your Question)
This example will allow you to continuously write your skills, while hitting , or Enter to 'divide' them.
jQuery(function($) {
$('#tags input').on('focusout', function() {
var txt = this.value.replace(/[^a-zA-Z0-9\+\-\.\#]/g, ''); // allowed characters list
if (txt) $(this).before('<span class="tag">' + txt + '</span>');
this.value = "";
this.focus();
}).on('keyup', function(e) {
// comma|enter (add more keyCodes delimited with | pipe)
if (/(188|13)/.test(e.which)) $(this).trigger('focusout');
});
$('#tags').on('click', '.tag', function() {
if (confirm("Really delete this tag?")) $(this).remove();
});
});
#tags {
float: left;
border: 1px solid #ccc;
padding: 4px;
font-family: Arial;
}
#tags span.tag {
cursor: pointer;
display: block;
float: left;
color: #555;
background: #add;
padding: 5px 10px;
padding-right: 30px;
margin: 4px;
}
#tags span.tag:hover {
opacity: 0.7;
}
#tags span.tag:after {
position: absolute;
content: "×";
border: 1px solid;
border-radius: 10px;
padding: 0 4px;
margin: 3px 0 10px 7px;
font-size: 10px;
}
#tags input {
background: #eee;
border: 0;
margin: 4px;
padding: 7px;
width: auto;
}
Add a skill and hit [,] or [Tab] or [Enter]<br><br>
<div id="tags">
<span class="tag">Photoshop</span>
<span class="tag">Illustrator</span>
<input type="text" value="" placeholder="Add a skill" />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Would you like to try this http://xoxco.com/projects/code/tagsinput/?
This is tags editor jquery plugin, simmilar to stackoverflow tags. I think, it is pretty nice. But in terms of your problem you would need some customizations.
if you are using client side scripting,
use jquery function split() the value with comma(',') to an array then append a css class to each array variable and display it.
var raw_data = "skill 1, skill 2, skill 3";
data_array = raw_data .split(",");
can access the elements by data_array[0],data_array[1] and data_array[2]
add or append these values to input field or html elements with .css( "color", "red" )

Categories