Variables don't work for my iframe's srcdoc or you can't use div.value or something.When I use a variable for an iframe's srcdoc the iframe's html(srcdoc) doesn't update. This code is from me trying to make a code editor. Please Help, I am okay with using jQuery.
It's not done
const html = document.getElementById("html");
const css = document.getElementById("css");
const js = document.getElementById("js");
var edH = document.getElementById("edH");
var edC = document.getElementById("edC");
var edJ = document.getElementById("edJ");
var ifr = document.getElementById("res");
var cssCode;
var htmlCode;
var jsCode;
html.addEventListener("click", changeHTML);
css.addEventListener("click", changeCss);
js.addEventListener("click", changeJs);
html.addEventListener("keydown", update);
function changeHTML() {
htmlCode = edH.value;
jsCode = edJ.value;
cssCode = edC.value;
edH.value = htmlCode;
edH.style.display = "block";
edC.style.display = "none";
edJ.style.display = "none";
}
function changeCss() {
htmlCode = edH.value;
jsCode = edJ.value;
cssCode = edC.value;
edC.value = cssCode;
edC.style.display = "block";
edH.style.display = "none";
edJ.style.display = "none";
}
function changeJs() {
htmlCode = edH.value;
jsCode = edJ.value;
cssCode = edC.value;
edJ.style.display = "block";
edC.style.display = "none";
edH.style.display = "none";
}
function update() {
ifr.srcdoc = edH.value;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<div id="tab" class="tabs">
<p class="langs" id="lang">
<span id="html">HTML</span>
<span id="css">CSS</span>
<span id="js">Javascript</span>
</p>
</div>
<div id="edH" class="edH" contenteditable="true"></div>
<div id="edC" class="edC" contenteditable="true"></div>
<div id="edJ" class="edJ" contenteditable="true"></div>
<iframe id="res" width="500px" height="200px"></iframe>
</body>
<script src="main.js"></script>
</html>
the iframe's srcdoc will not update to edH.value.
demo: https://codesandbox.io/s/lucid-haze-m95ht3
Thanks.
You're adding a keydown event listener to a span; there's no where to type in a span.
Related
I am a beginner in Javascript and is currently trying to make a todo list web app. But currently stucked at the edit button.
As you can see, I wanted to make an editable checklist but somehow everytime I hit the edit button, a new input comes out instead of replacing the current one. It also removes the 'checkbox' somehow.
Can anyone tell me where I did wrong? Thank you for your time!
Somehow the edit button doesn't work at all when I try to run it on VSCode. Here it works, but not as I wanted though.
const ul = document.querySelector('#invitedList');
ul.addEventListener('click', (event) => {
if(event.target.tagName === 'BUTTON') {
const button = event.target;
const li = button.parentNode;
if(button.textContent === 'edit') {
const span = li.firstElementChild;
const input = document.createElement('input');
input.type = 'text';
input.value = span.textContent;
li.insertBefore(input, span);
li.removeChild(span);
button.textContent = 'save';
} else if(button.textContent === 'save') {
const input = li.firstElementChild;
const span = document.createElement('span');
span.textContent = input.value;
li.insertBefore(span, input);
li.removeChild(input);
button.textContent = 'edit';
}
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="test.js"></script>
</head>
<body>
<!-- TASK LIST THAT IS SUPPOSED TO BE EDITABLE GOES DOWN HERE, AS A TEMPLATE -->
<div id="taskit" class="task">
<ul id="invitedList">
<input type="checkbox"/>
<label>
<span id="editable" class="custom-checkbox">Edit This</span>
</label>
<button type="submit" id="editbtn">edit</button>
</ul>
</div>
</body>
</html>
Have you considered trying Node.ReplaceChild() instead of creating a new element? Not sure how to tell you exactly how to do it but here is a link to the documentation:
https://developer.mozilla.org/en-US/docs/Web/API/Node/replaceChild
I'd suggest to change styling instead of creating and removing elements. Here is possible solution:
let isEditState = false;
const editButton = document.querySelector('#editbtn');
editButton.addEventListener('click', (event) => {
const span = document.querySelector('#editable');
const checkbox = document.querySelector('#checkbox');
const text = document.querySelector('#text');
if (isEditState) {
span.innerText = text.value;
checkbox.style.display = 'inline';
text.style.display = 'none';
editButton.innerText = 'edit';
} else {
checkbox.style.display = 'none';
text.style.display = 'inline';
editButton.innerText = 'save';
}
isEditState = !isEditState;
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="taskit" class="task">
<ul id="invitedList">
<input type="checkbox" id="checkbox"/>
<input type="text" id="text" style="display: none"/>
<label>
<span id="editable" class="custom-checkbox">Edit This</span>
</label>
<button type="submit" id="editbtn">edit</button>
</ul>
</div>
</body>
</html>
Ok, so all I want to do is : whenever I write something in the Input and press the Button, a new HTML page gets created. But I also want to set the page's name and location. Tried searching it, couldn't find any results...
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Books test</title>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.1/dist/mini-default.min.css">
</head>
<body>
<input type="text" id="book-input">
<button id="book-button">Create a book</button>
<h1>All the books</h1>
<ul id="books-list"></ul>
<script src="/app.js" defer></script>
</body>
</html>
Javascript
const bookNameInput = document.getElementById("book-input");
const bookCreateButton = document.getElementById("book-button");
var bookName;
var bookId;
bookCreateButton.addEventListener('click', createBook);
function generateRandomNumber() {
var randomNumber = Math.floor(1000000000 + Math.random() * 900000000);
var rn = randomNumber.toString();
return rn;
}
function createBook() {
bookName = bookNameInput.value;
bookId = generateRandomNumber();
fbn = bookName + '_' + bookId
var bookLi = document.createElement("li");
bookLi.classList.add("book-li")
var bookLiA = document.createElement("a");
bookLiA.innerText = bookName;
bookLiA.href = fbn + ".html";
document.getElementById("books-list").appendChild(bookLi);
bookLi.appendChild(bookLiA);
bookNameInput.value = "";
}
Tried using :
const newDoc = document.implementation.createHTMLDocument(title)
But doesn't creates any page...
I already answered your question in comments, so I'm writing this down as a answer so it might be helpful for others too.
So as i was saying it is totally possible to save the file directly from the client side without any need of server or special file system permission on client side -
In Short You can do something like this, Follow this step-by-step -
Get the value of the text input using input.value
Create a Blob out of It
Create a DOM element of anchor element with download attribute
Convert the Blob to an URL Using URL.createObjectURL and Chane the href of previously created anchor element to the returning url
Click on the anchor element without appending it to the DOM
Here is the Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Generate HTML Page</title>
<style>
* {
padding: 0;
box-sizing: border-box;
margin: 0;
}
</style>
</head>
<body style="padding: 20px">
<textarea
placeholder="Enter Your Content Here"
style="width: 100%; height: 500px; font-size: 18px; padding: 18px"
></textarea>
<br /><br />
<button>Download Text as HTML page</button>
<script>
let btn = document.querySelector("button");
let text = document.querySelector("textarea");
btn.addEventListener("click", () => {
if (!/^\s*$/.test(text.value)) {
let a = document.createElement("a");
a.setAttribute("download", "download.html");
let blob = new Blob(text.value.split(""));
let url = URL.createObjectURL(blob);
a.href = url;
a.click();
text.value = "";
} else {
alert("Blank text");
text.value = "";
}
});
</script>
</body>
</html>
I want the whole page content to change when I press the button from the Words.html to SelectNumber.html
This is the Words.html
<html>
<head>
<meta charset="UTF-8">
<title>Number Game</title>
<link rel = "stylesheet" href = "stylesheet.css">
</head>
<body>
<div id = "firstScreen">
<h1 id ="Title" class = "title">
The<br>Number Game
</h1>
<input type = "image" src = "button.png" class = "button1" onclick = "loadScreen">
<h3 class = "start">START</h3>
</div>
</body>
<script src = "Main.js"> </script>
</html>
This is the JS
function loadScreen()
{
var load = new XMLHttpRequest();
load.onreadystatechange = function()
{
document.getElementById("firstScreen").innerHTML = this.responseText;
}
};
load.open("GET", "SelectNumber.html", true);
load.send();
}
function myFunction(load)
{
document.getElementById("firstScreen").innerHTML = load.responseText;
}
And this is the SelectNumber.html
<html>
<head>
<meta charset="UTF-8">
<title>Number Game</title>
<link rel = "stylesheet" href = "stylesheet.css">
</head>
<body>
<div id="Screen2">
<p> Hello World</p>
</div>
<script src = "Main.js"></script>
</body>
</html>
I want the whole content to change from Words.html to NumberSelect.html when I press the input button.
function loadScreen() {
var load = new XMLHttpRequest();
load.onreadystatechange = function() {
document.getElementById("firstScreen").innerHTML = this.responseText;
}
load.open("GET", "select.html", true);
load.send();
}
function myFunction(load) {
document.getElementById("firstScreen").innerHTML = this.responseText;
}
loadScreen();
I have a program where the user types in something and then something outputs in the "console." The most recent entered thing stays at the bottom unless the user scrolls up
The body of my document seems to be where I can dd effects like hidden scroll to it. I read another post and used scrollTop and scrollHeight and it is not working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href = "style.css">
</head>
<body id = "scroll">
<div id="game">
<div id="console">
</div>
</div>
<div id = "command-box">
<div id = "cmd">
<input id = "command" onkeypress = "doAThing(event);">
</div>
</div>
</div>
<script src = "variables.js"></script>
<script src = "code.js"></script>
</body>
</html>
var input = document.querySelector("#command");
var theConsole = document.querySelector("#console");
theConsole.scollTop = theConsole.scrollHeight;
var myScroll = document.getElementById("scroll");
function doAThing(event) {
var theKeyCode = event.keyCode;
if(theKeyCode === 13) acceptCommand();
setInterval(scrollUpdate, 1000);
}
function scrollUpdate() {
myScroll.scrollTop = myScroll.scrollHeight;
}
function acceptCommand() {
var p = document.createElement("p");
if(input.value === "hi") theConsole.append("Hi!", p);
if(input.value === "ping") theConsole.append("Pong!", p);
}
I defined Textarea auto height.
If data keyed on textarea auto height will be working fine. and I stored localstorage in browser. when refreshing the page height will changed to the normal height and text will be hidden.
I need to the same height when refreshing the page. Please guide me. Thanks in advance. sorry for poor english.
function saveEdits1() {
var editElem = document.getElementById("post_title");
var userVersion1 = editElem.value;
sessionStorage.userEdits1 = userVersion1;
}
function checkEdits() {
if( sessionStorage.userEdits1!=null){
document.getElementById("post_title").value = sessionStorage.userEdits1;
}
}
function textAreaAdjust(txt) {
txt.style.height = "10px";
txt.style.height = (25+txt.scrollHeight)+"px";
}
<body onload="checkEdits()">
<div class="container">
<div class="cont_group1">
<div class="form-group">
<textarea cols="33" onkeydown="textAreaAdjust(this)" style="overflow:hidden" name="post_title" id="post_title" onblur="saveEdits1()" class="form-control"></textarea>
</div>
</div>
</div>
</body>
make a fake event to trigger key event in your textarea.
function saveEdits1() {
var editElem = document.getElementById("post_title");
var userVersion1 = editElem.value;
sessionStorage.userEdits1 = userVersion1;
}
function checkEdits() {
if (sessionStorage.userEdits1 != null) {
document.getElementById("post_title").value = sessionStorage.userEdits1;
var ev = new Event("keypress", {"bubbles":true, "cancelable":false});
var el = document.getElementById("post_title");
el.addEventListener("keypress",textAreaAdjust(el));
el.dispatchEvent(ev)
}
}
function textAreaAdjust(txt) {
txt.style.height = "10px";
txt.style.height = (25 + txt.scrollHeight) + "px";
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Starfleet</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body onload="checkEdits()">
<div class="container">
<div class="cont_group1">
<div class="form-group">
<textarea cols="33" onkeydown="textAreaAdjust(this)" style="overflow:hidden" name="post_title" id="post_title" onblur="saveEdits1()" class="form-control"></textarea>
</div>
</div>
</div>
</body>
</html>