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>
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.
Hi all I have the following code:
my code
let companyNameField = document.getElementById('FormField_6_input');
let button = document.getElementById('ContinueButton_6');
companyNameField.addEventListener('input', validate);
function validate() {
var companyNameValue = companyNameField.value;
var companyRGEX = /[2-9]\d{3}/;
if (companyNameValue.match(companyRGEX)) {
button.disabled = false;
} else {
button.disabled = true;
companyNameField.setAttribute("pattern", '[2-9]\\d{3}');
companyNameField.setAttribute("title", "wrong");
}
}
<form action="" onchange="validate()">
<input type="text" id="FormField_6_input" name="CompanyName" />
<button id="ContinueButton_6">Continue</button>
</form>
With my function, I am checking if my input text satisfies my regex. If not then I disabled my button.
With disabling I also want to set the "title" attribute to my input for showing a message.
With console log I can see that pattern and title were successfully added to my input but when I am starting to write something wrong only my button gets disabled and the title not showing the error message.
How can I fix that?
Actually, title attribute could only be shown while the mouse is hovering on the tag, so it is not suitable to add title in input. Maybe it works in next code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="" onchange="validate()">
<input type="text" id="FormField_6_input" name="CompanyName" />
<button id="ContinueButton_6">Continue</button>
<span id="wrong_text" style="display:none">wrong</span>
</form>
<script>
let companyNameField = document.getElementById('FormField_6_input');
let button = document.getElementById('ContinueButton_6');
let wrongText = document.getElementById('wrong_text');
companyNameField.addEventListener('input', validate);
function validate() {
var companyNameValue = companyNameField.value;
var companyRGEX = /[2-9]\d{3}/;
if (companyNameValue.match(companyRGEX)) {
button.disabled = false;
wrongText.style.display = "inline";
} else {
button.disabled = true;
companyNameField.setAttribute("pattern", '[2-9]\\d{3}');
companyNameField.setAttribute("title", "wrong");
wrongText.style.display = "none";
}
}
</script>
</body>
</html>
Look at the above snippet, I've tried to solve your issue. Let me know if it works
let companyNameField = document.getElementById("FormField_6_input");
let button = document.getElementById("ContinueButton_6");
companyNameField.addEventListener("input", validate);
function validate() {
var companyNameValue = companyNameField.value;
var companyRGEX = /[2-9]\d{3}/;
if (companyNameValue.match(companyRGEX)) {
button.disabled = false;
} else {
button.disabled = true;
companyNameField.setAttribute("pattern", "[2-9]\\d{3}");
companyNameField.setAttribute("title", "wrong");
}
}
<!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>
<form action="">
<input
type="text"
id="FormField_6_input"
name="CompanyName"
onchange="validate()"
/>
<button id="ContinueButton_6" disabled>Continue</button>
</form>
</body>
</html>
instead of using regex you can also use parseInt(); and isNaN(); to only allowing numbers to enter.
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>
I tried to copy value from div to textarea and it works. But I want to use content of textarea in my javascript and if I don't click in text area and use for example "space bar" it doesn't work :/ I need to click here and write anything to make it work. But I want to make it work without editing anything manually. I want to have in textarea only copy of div. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Editor</title>
<style type="text/css" media="screen">
#editor {
margin-left: 15px;
margin-top: 15px;
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="src-min/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<div id="editor"></div>
<textarea id="input"></textarea>
<script src="bundle.js"></script>
<form id="myForm">
<input type="hidden" id="output">
</form>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
var code = editor.getSession().getValue();
console.log(code);
console.log(document.getElementById('output').innerHTML);
var test = document.getElementById('input');
console.log(test.value);
}
var textarea = $('#input');
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/sh");
editor.getSession().on('change', function () {
textarea.val(editor.getSession().getValue());
});
textarea.val(editor.getSession().getValue());
</script>
</body>
</html>
And "budle.js" file:
var input = document.getElementById('input');
var error = document.getElementById('error');
input.addEventListener('change', update);
input.addEventListener('input', update);
function update() {
try {
var value = parse(input.value);
output.textContent = JSON.stringify(value, null, 2);
error.textContent = '';
} catch (e) {
error.textContent = String(e);
}
}
#edit
So I want to send content of textarea without any integration, but like now I need to click for example spacebar in it to make it work :/
I am trying to bind my html button to a function using knockout. The function is only supposed to pop up the alert message when the button is clicked but instead, the function is executed on page load.
Here's my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type='text/javascript' src='knockout-2.2.0.js'></script>
<script type='text/javascript' src='studentapp.js'></script>
</head>
<body>
<div class="container">
<div class="new_student">
<input type="text" class="name" placeholder="name" data-bind="value: person_name, hasfocus: person_name_focus()">
<input type="text" class="age" placeholder="age" data-bind="value: person_age">
<button data-bind="click: createPerson">Create</button>
</div>
</body>
</html>
Here's my js:
function createPerson(){
alert("Name ");
};
ko.applyBindings(new createPerson());
The console is displaying the following:
Uncaught TypeError: Cannot read property 'nodeType' of null
Any ideas ?
view model should look like this
var createPerson = function(){
var self = this;
self.name = "Mike";
self.sendAlert = function(){
alert(self.name);
};
};
ko.applyBindings(new createPerson());
then your button can use
<button type="button" data-bind="click:sendAlert"></button>
Please have a look on this tutorial
Your code should looks like
var viewModel = function () {
var self = this;
self.name = "Name";
self.age = 22;
self.buttonClicked = function () {
alert(self.name + " is " + self.age + " old");
};
};
ko.applyBindings(new viewModel());
Here is working fiddle sample.
EDIT:
Fiddle was fixed, and link updated
try put defer tag in your script, and put all javascript code after </html> tag, it`s a good practice.
<script type='text/javascript' src='studentapp.js' defer="defer"></script>