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>
Related
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.
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>
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 have this Html code but when i trying to execute in browser console i am getting error has
elementWithHiddenContent is null
My Html Code is:
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ControlShiftI Example</title>
<!-- <style>
input.password-input {
-webkit-text-security: disc;
}
</style>-->
<script>
var currentInnerHtml;
var element = new Image();
var elementWithHiddenContent = document.querySelector("#element-to-hide");
var innerHtml = elementWithHiddenContent.innerHTML;
element.__defineGetter__("id", function() {
currentInnerHtml = "";
});
setInterval(function() {
currentInnerHtml = innerHtml;
console.log(element);
console.clear();
elementWithHiddenContent.innerHTML = currentInnerHtml;
}, 1000);
</script>
</head>
<body>
<div id="element-to-hide">
Enter UserName <input name="user" type="text"><br>
Enter Password <input class="password-input" name="pass" type="password">
</div>
</body>
</html>
Any help?
Try moving your script to the bottom of the body. The element does not exist when the script executes.
I think the problem is that the dom has not been loaded when you run the scriopt.
Put your code in a function and load it on the body load, this way you are sure that all your html has been rendered:
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ControlShiftI Example</title>
<!-- <style>
input.password-input {
-webkit-text-security: disc;
}
</style>-->
<script>
function bodyOnLoad() {
var currentInnerHtml;
var element = new Image();
var elementWithHiddenContent = document.querySelector("#element-to-hide");
var innerHtml = elementWithHiddenContent.innerHTML;
element.__defineGetter__("id", function() {
currentInnerHtml = "";
});
setInterval(function() {
currentInnerHtml = innerHtml;
console.log(element);
console.clear();
elementWithHiddenContent.innerHTML = currentInnerHtml;
}, 1000);
}
</script>
</head>
<body onload="bodyOnLoad()">
<div id="element-to-hide">
Enter UserName <input name="user" type="text"><br>
Enter Password <input class="password-input" name="pass" type="password">
</div>
</body>
</html>
ive a form with a image , button and textbox. ive to resize the images height and width to what ever is entered in the textbox, when the button is clicked. My image just disappears when the button is clicked.
heres my code
<!DOCTYPE HTML>
<html>
<head>
<title>Resize Image</title>
</head>
<body>
<script>
function resizeimage()
{
var theImg = document.getElementById('image');
theImg.height = size;
theImg.width = size;
}
var size=parseInt(document.getElementById('txtbox'));
</script>
<form name ="ResizeImage">
<img src = "cookie.jpg" id="image">
</br>
<input type=button value="Resize" onclick="resizeimage()">
</br>
<input type=text id="txtbox"
</form>
</body>
</html>
Apart from the HTML problems (please run it through the validator), the main problem is that the part of code that reads the size of the image is outside of the function. On page load, this is what happens.
The function resizeimage() is defined
The var size is set to whatever is in the input at that point
The contents of the page are loaded.
At 2. the input doesn't even exist yet because 3. isn't done yet, so var size is set to undefined. It never changes after that, because the function resizeimage() does not try to read the size of the image again.
Also, document.getElementById returns an element. You will have to read what the user put into it by using it's .value property
Try this:
function resizeimage()
{
var size=parseInt(document.getElementById('txtbox').value);
var theImg = document.getElementById('image');
theImg.height = size;
theImg.width = size;
}
Working example: http://jsfiddle.net/KZH5p/
I would cache the ids first:
var input = document.getElementById('txtbox');
var theImg = document.getElementById('image');
function resizeimage() {
var size = input.value;
theImg.height = size;
theImg.width = size;
}
function changeDogsSize() {
var dogSize = parseInt((id_input).value);
id_dog.width = dogSize;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container bg-light mt-3"></div>
<!--changing dogs image-->
<div class="container">
<img id="id_dog" src="https://i.pinimg.com/originals/e4/9d/75/e49d755afcd02cdbf39d374b42a10ecd.jpg" alt="dog">
<input id="id_input" type="text" class="form-control mt-4" id="exampleInputAmount" placeholder="enter img width">
<button id="id_changeBtn" onclick="changeDogsSize()" type="button" class="btn btn-secondary btn-lg mt-3 text-dark">Change</button>
</div>
</body>
</html>