Code works in jsfiddle but not in html page [duplicate] - javascript

This question already has an answer here:
jquery code works on codepen/jsfiddle but not html page
(1 answer)
Closed 6 years ago.
I am using code from Max lines textarea to create a textarea with only 9 lines and this code works perfectly on my jsfiddle, https://jsfiddle.net/cityFoeS/3j48cpzn/ The textarea will not limit the textarea to 9 lines like I want it to.
my HTML:
<html>
<head>
<style>
body {
background: black;
}
textarea {
overflow: hidden;
resize: none;
font-family: courier;
color: white;
outline: none;
line-height: 20px;
margin: 0;
padding: 0;
border: 0;
left: 45px;
position: absolute;
font-size: 14px;
background-color: black;
border-bottom: 1px solid white;
}
div {
font-family: courier;
color: white;
line-height:20px;
position: absolute;
font-size: 14px;
width: 29px;
border-right: 1px solid white;
border-bottom: 1px solid white;
left: 10px;
}
</style><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
var limit = 9; // <---max no of lines you want in textarea
var textarea = document.getElementById("splitLines");
var spaces = textarea.getAttribute("cols");
textarea.onkeyup = function() {
var lines = textarea.value.split("\n");
for (var i = 0; i < lines.length; i++)
{
if (lines[i].length <= spaces) continue;
var j = 0;
var space = spaces;
while (j++ <= spaces)
{
if (lines[i].charAt(j) === " ") space = j;
}
lines[i + 1] = lines[i].substring(space + 1) + (lines[i + 1] || "");
lines[i] = lines[i].substring(0, space);
}
if(lines.length>limit)
{
textarea.style.color = 'red';
setTimeout(function(){
textarea.style.color = '';
},500);
}
textarea.value = lines.slice(0, limit).join("\n");
};
</script>
</head>
<body>
<div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10</div><textarea rows="10" cols="50" id="splitLines" onpaste="return false;"></textarea>
</body>
</html>

The problem is that in JSFiddle, you have the option "Load Type" set to "onload" under the JavaScript options.
In your code, however, the JavaScript runs immediately, before the HTML — this will cause the error (and this is what I get when running it as a standalone HTML page):
Uncaught TypeError: Cannot read property 'getAttribute' of null
There are two solutions:
Moving the <script> tags to the end of the <body> tag. For example:
<body>
<!-- all your visible HTML elements -->
<script>
// all your JS code
</script>
</body>
Encapsulating all the JavaScript in a window.onload function or a $(function() {}) (for use with jQuery). For example:
<script>
window.onload = function() {
// all your JS code
};
</script>

Related

Save contentEditable into html file with javascript

How can I save contenteditable element with javascript(no PHP) into actual HTML code? So I can edit content whenever even in offline mode.
Like when you click "save button" it replace old file with new one(text with changes).
If there is a way to make this work in offline mode with any other programming lang please suggest.
I found a few examples but they were all made with PHP.
Also, I will post code. In this code, you are able to edit the file with javascript and save it. But problem is that it does not save into actual HTML code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<style type="text/css">
body{
font-family: "Dosis";
font-size: 1.3em;
line-height: 1.6em;
}
.headline{
font-size: 2em;
text-align: center;
}
#wrapper {
width: 600px;
background: #FFF;
padding: 1em;
margin: 1em auto;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
border-radius: 3px;
}
button {
border: none;
padding: 0.8em;
background: #F96;
border-radius: 3px;
color: white;
font-weight: bold;
margin: 0 0 1em;
}
button:hover, button:focus {
cursor: pointer;
outline: none;
}
#editor {
padding: 1em;
background: #E6E6E6;
border-radius: 3px;
}
</style>
<body>
<div id="wrapper">
<section>
<h1 class="headline">contentEditable Demonstration</h1>
<button id="editBtn" type="button">Edit Document</button>
<div id="editDocument">
<h1 id="title">A Nice Heading.</h1>
<p>Last Edited by <span id="author">Monty Shokeen</span>
</p>
<p id="content">You can change the heading, author name and this content itself. Click on Edit Document to start editing. At this point, you can edit this document and the changes will be saved in localStorage. However, once you reload the page your changes will be gone. To fix it we will have to retrieve the contents from localSotrage when the page reloads.</p>
</div>
</section>
</div>
<script>
var editBtn = document.getElementById('editBtn');
var editables = document.querySelectorAll('#title, #author, #content');
if (typeof(Storage) !== "undefined") {
if (localStorage.getItem('title') !== null) {
editables[0].innerHTML = localStorage.getItem('title');
}
if (localStorage.getItem('author') !== null) {
editables[1].innerHTML = localStorage.getItem('author');
}
if (localStorage.getItem('content') !== null) {
editables[2].innerHTML = localStorage.getItem('content');
}
}
editBtn.addEventListener('click', function(e) {
if (!editables[0].isContentEditable) {
editables[0].contentEditable = 'true';
editables[1].contentEditable = 'true';
editables[2].contentEditable = 'true';
editBtn.innerHTML = 'Save Changes';
editBtn.style.backgroundColor = '#6F9';
} else {
// Disable Editing
editables[0].contentEditable = 'false';
editables[1].contentEditable = 'false';
editables[2].contentEditable = 'false';
// Change Button Text and Color
editBtn.innerHTML = 'Enable Editing';
editBtn.style.backgroundColor = '#F96';
// Save the data in localStorage
for (var i = 0; i < editables.length; i++) {
localStorage.setItem(editables[i].getAttribute('id'), editables[i].innerHTML);
}
}
});
</script>
</body>
</html>
You'll want to use something like the downloadInnerHtml function as described here. Ideally you'll probably also want to strip out the script tag and content editable attribute before exporting because you won't want the final html page to be editable

Update element with ajax don't affect until for loop end

I want to print a lot of numbers ONE-BY-ONE with AJAX.
something like this: (each new line is update of previous line!)
output is:
1
12
123
1234
12345
123456
...
I tried a lot and read a lot of this same problem, but i couldn't find my right Answer.
The real problem is every FOR LOOP in javascript will NO affect the DOM after it will END the loop. I just want update the DOM inside the FOR LOOP while working on a long running job.
Please look at my code.
$("#btn").on("click", dowork);
function dowork() {
document.getElementById("foo").innerHTML = "working";
setTimeout(function() {
var counter = 100; // i want assign counter = 2000000000
for (var i = 0; i < counter; i++) {
document.getElementById("print_here").innerHTML += i;
}
document.getElementById("foo").innerHTML = "done!";
}, 50);
}
#btn {
background: #1f1f1f;
padding: 10px;
font-weight: bolder;
color: #fff;
width: 50%;
margin: auto;
margin-top: 10px;
text-align: center;
cursor: pointer;
}
#print_here {
overflow-wrap: break-word;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn">CLICK TO DO WORK</div>
<div id="foo"></div>
<div id="print_here"></div>
Thanks for any answer and help to solve this problem.
Your DOM is "locked" while it is being updated and redrawn ones the loop is done. You can free up the resource to let the DOM update each time wrapping your DOM change in a setTimeout, similar to:
setTimeout(function(){
document.getElementById("print_here").innerHTML += i;
},1);
To ensure setTimeout uses the correct value for i use let i instead of var i
$("#btn").on("click", dowork);
function dowork() {
document.getElementById("foo").innerHTML = "working";
var counter = 3000; // i want assign counter = 2000000000
for (let i = 0; i < counter; i++) {
setTimeout(function() {
document.getElementById("print_here").innerHTML += i;
}, 1);
}
document.getElementById("foo").innerHTML = "done!";
}
#btn {
background: #1f1f1f;
padding: 10px;
font-weight: bolder;
color: #fff;
width: 50%;
margin: auto;
margin-top: 10px;
text-align: center;
cursor: pointer;
}
#print_here {
overflow-wrap: break-word;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn">CLICK TO DO WORK</div>
<div id="foo"></div>
<div id="print_here"></div>
I want change the #foo into "done!" after the FOR statement is END
You could check if you are at your last item you process within the setTimeout, similar to:
if (i == counter - 1){
document.getElementById("foo").innerHTML = "done!";
}
$("#btn").on("click", dowork);
function dowork() {
document.getElementById("foo").innerHTML = "working";
var counter = 3000; // i want assign counter = 2000000000
for (let i = 0; i < counter; i++) {
setTimeout(function() {
document.getElementById("print_here").innerHTML += i;
if (i == counter - 1){
document.getElementById("foo").innerHTML = "done!";
}
}, 1);
}
}
#btn {
background: #1f1f1f;
padding: 10px;
font-weight: bolder;
color: #fff;
width: 50%;
margin: auto;
margin-top: 10px;
text-align: center;
cursor: pointer;
}
#print_here {
overflow-wrap: break-word;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn">CLICK TO DO WORK</div>
<div id="foo"></div>
<div id="print_here"></div>
You need to let the call stack complete so the browser can do its work on the page. If you bog down the one main thread, page updates aren't going to occur.
One way to do this is use setImmediate or nextTick. This is non-standard, so check this polyfill: https://www.npmjs.com/package/browser-next-tick
Basically, you do an iteration, then tell the browser to do the next iteration as soon as possible... and this occurs on a fresh call stack.
Here is the working code for you:
$("#btn").on("click", dowork);
function dowork() {
document.getElementById("foo").innerHTML = "working";
setTimeout(function() {
var i, j, row = 5;
var html = "";
for (i = 1; i <= row; i++) {
for (j = 1; j <= i; j++) {
html += "<span>" + j + "</span>";
}
html += "</br>";
}
console.log(html);
document.getElementById("print_here").innerHTML = html;
}, 50);
}
#btn {
background: #1f1f1f;
padding: 10px;
font-weight: bolder;
color: #fff;
width: 50%;
margin: auto;
margin-top: 10px;
text-align: center;
cursor: pointer;
}
#print_here {
overflow-wrap: break-word;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn">CLICK TO DO WORK</div>
<div id="foo"></div>
<div id="print_here"></div>
Rows is the number of rows you want to print.

Resizing DIV depending on amount of characters in text field

I have made a text box, which i enter text into and it gets printed out in a div below as it is typed. Currently, the DIV can fit 24 characters into it and then i have the text to wrap. What i'm trying to do is to get the DIV to double in height for every 24 characters that are entered.
I want to do this using only Javascript and no jQuery
<div class="one">Input Some Text
<form>
<input type="text" id="pointlessInput"/>
<script>
var stringToBePrinted = document.getElementById("pointlessInput");
var len = stringToBePrinted.length;
stringToBePrinted.onkeyup = function(){
var len = stringToBePrinted.length;
document.getElementById("printbox").innerHTML = stringToBePrinted.value;
if(document.getElementById("pointlessInput").innerHTML.value.length == 24){
document.getElementById("printbox").style.height = "4em";
}
}
</script>
</form>
<div class="printbox" id="printbox"></div>
</div>
stylesheet
.printbox {
border-width:thick 10px;
border-style: solid;
background-color:#fff;
line-height: 2;
color:#6E6A6B;
font-size: 14pt;
text-align:center;
border: 3px solid #969293;
width:50%;
height:2em;
margin: auto;
word-wrap: break-word;
}
var stringToBePrinted = document.getElementById("pointlessInput");
stringToBePrinted.onkeyup = function() {
document.getElementById("printbox").innerHTML = stringToBePrinted.value;
var multiple = Math.ceil(parseInt(document.getElementById("pointlessInput").value.length) / 24);
document.getElementById("printbox").style.height = (multiple * 2) + "em";
}
Remove the if condition and the height from the css, it works just fine.
Check the below working example.
var stringToBePrinted = document.getElementById("pointlessInput");
var len = stringToBePrinted.length;
stringToBePrinted.onkeyup = function(){
var len = stringToBePrinted.length;
document.getElementById("printbox").innerHTML = stringToBePrinted.value;
}
.printbox {
border-width:thick 10px;
border-style: solid;
background-color:#fff;
line-height: 2;
color:#6E6A6B;
font-size: 14pt;
text-align:center;
border: 3px solid #969293;
width:50%;
margin: auto;
word-wrap: break-word;
}
<div class="one">Input Some Text
<form>
<input type="text" id="pointlessInput"/>
<script>
</script>
</form>
<div class="printbox" id="printbox"></div>
</div>

Removing dynamic divs made with JS on click

My code knowledge is very limited, comes from CodeHS and Codecademy so bear with me.
So I am trying to make a list of numbers, that can be deleted on click. So far so good with the number list, but I still can't figure how to remove them when I click the div box.
I know theres JSFiddle, but I think this is best I could do:
http://www.codecademy.com/rfabrega/codebits/xZ61aJ
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=203">
<title>Lista Mundial</title>
<style>
.divContainer {
width: 35px;
height: 25px;
border: solid 1px #c0c0c0;
background-color: #e1e1e1;
font-family: verdana;
color: #000;
float: left;
}
.text {
font-size: 15px;
font-family: verdana;
color: black;
margin-top: 4px;
}
</style>
</head>
<body>
<script type="text/javascript">
for(var i = 1; i <= 639; i++){
var divTag = document.createElement("div");
divTag.id = i;
divTag.className = "divContainer";
document.body.appendChild(divTag);
var pTg = document.createElement("p");
pTg.setAttribute("align", "center");
pTg.className = "text";
pTg.innerHTML = (i);
document.getElementById(i).appendChild(pTg);
}
</script>
</body>
</html>
you have to create a function on click that deletes the target div tag:
so in your code, after creating the div element. insert this:
divTag.onclick = function(){this.parentNode.removeChild(this)};
$(document).ready(function(){
$('p').hide();
$("body").on("click",".divContainer",function(){
$(this).remove();
});
});

Have different line-height between input and output area

I'm trying to make a terminal shell like page.
See my code at jsfiddle:
http://jsfiddle.net/paopaomj/qGw4Q/9/
The input line seems have more line-height then the outputs.
Try it and type something press some enters you'll know what I mean.
Thanks.
html:
<body>
<div id="output"></div>
<div id="input">
root#host
<input type="text" id="command" />
</div>
javascript:
$("#command").keyup(function (e) {
if (e.keyCode == 13) {
submit();
}
});
var submit = function () {
var commandEl = document.getElementById("command");
var command = commandEl.value;
var outputel = document.getElementById("output");
var new_row = document.createElement("div");
new_row.innerHTML = "root#host " + command;
outputel.appendChild(new_row);
commandEl.value="";
};
The input got some padding. Add
padding:0px;
margin-left:-1px;
to the input css
OK.
I got it sovled finally by setting margin=0 for input field, margin-top=0 for iutput div, and margin-bottom=0 for output div:
#output { margin-bottom: 0px; background-color: #000000; }
#input { margin-top: 0px; background-color: #000000; }
input {
border: 0;
background: #000000;
color: #00FF00;
outline: none;
font-family:'Rosario', sans-serif;
font-size: 16px;
padding: 0px;
margin-left: -0.1px;
margin: 0px;
}
Thanks for Johan's help!

Categories

Resources