Find HTML text that isn't saved as a value? - javascript

So I'm inspecting a website field where I can enter text. On most text boxes/fields, when you enter text, it will be saved as 'innerText' or as a value 'text', but this field doesn't save the string like that anywhere in html. This means I can't edit the text that is in that field.
Where would this string be stored, and how could I edit it using javascript?
<div id="mirror" class="mirror-text style-scope iron-autogrow-textarea" aria-hidden="false">sdslll </div>
<div class="textarea-container fit style-scope iron-autogrow-textarea">
<textarea id="textarea" class="style-scope iron-autogrow-textarea" rows="3" autocomplete="off" required="" maxlength="10000"></textarea>
</div>
As you can see, "mirror" holds the text I want to edit. But when I edit that, it doesn't take effect

<html>
<body>
<input id='in' type='text' />
<h3 id='out'></h3>
<script>
let input = document.getElementById('in');
let output = document.getElementById('out');
document.onkeyup = function () {
output.innerHTML = input.value;
};
</script>
</body>
</html>

<script>
window.onload = function () { setValue(); }
function setValue(){
document.getElementById("mirror").value = "Some value here";
}
</script>
<input id="mirror" class="mirror-text style-scope iron-autogrow-textarea" aria-hidden="false" value="sdslll ">
<div class="textarea-container fit style-scope iron-autogrow-textarea">
<textarea id="textarea" class="style-scope iron-autogrow-textarea" rows="3" autocomplete="off" required="" maxlength="10000"></textarea>
</div>

Related

onkeyup javascript attribute set text in textbox

I have this TextArea
<textarea class="textarea" onkeyup="deltxtArea(1)" id="txtID1" placeholder="Remarks"></textarea>
and this hidden text box
<input type="hidden" name="Textarea" id="txtArea" value="" required>
and this is my JavaScript
function deltxtArea(id){
var txtAreaValue = $('#txtID1').val();
alert(txtAreaValue);
}
As you can see here I used alert just to make sure that the onkeyup is working by getting the value of textarea and as of now it successfully gets the value of textarea and showing to the alert.
But when I tried to set the value of textarea to hidden textbox the script of onkeyup doesn't work anymore
This is the jQuery I used when I'm trying to set a text to a textbox
$("#txtArea").val(txtAreaValue);
You can use this context and remove the invoke ().
<textarea class="textarea" onkeyup="deltxtArea" id="txtID1" placeholder="Remarks"></textarea>
And into your script file, just do:
function deltxtArea(id){
var txtAreaValue = $(this).val();
$("#txtArea").val(txtAreaValue);
}
Or a better way, do your keyup event into the script file, and remove the inline attribute of your html:
function deltxtArea(id){
var txtAreaValue = $(this).val();
$("#txtArea").val(txtAreaValue);
}
$(function() {
$("#txtID1").keyup(deltxtArea)
})
function deltxtArea(){
var txtAreaValue = document.getElementById('txtID1').value;
document.getElementById('txtArea').value = txtAreaValue;
}
<textarea class="textarea" onkeyup="deltxtArea()" id="txtID1" placeholder="Remarks"></textarea>
<input type="hidden" name="Textarea" id="txtArea" value="" required>
All this looks fine but i think difficult to find the issue
I have tried as per your requirement all this looks fine , so kindly tried this code , you can avoid to include jquery if you already included
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<textarea class="textarea" onkeyup="deltxtArea(1)" id="txtID1" placeholder="Remarks"></textarea>
<input type="text" name="Textarea" id="txtArea" value="" required>
<script type="text/javascript">
function deltxtArea(id){
var txtAreaValue = $('#txtID1').val();
alert(txtAreaValue);
$("#txtArea").val(txtAreaValue);
}
</script>
</body>
</html>
if it works for you after that you can change input type from text to hidden

CSS change class when div is empty

I've managed to make sure my editable DIV is underlined red when I load my page. Then when I enter text, it becomes white. So far, so good. When I clear the field though, either with a function or just simply deleting it (Backspace/delete), it remains white. How to I get it back to understanding that it's empty, and changing the class back once more when the text has been cleared?
CSS:
#Control1, #Control2, #Control3 {
background-image:url('img/underline_red.png');
}
#Control1:not([value=""]), #Control2:not([value=""]), #Control3:not([value=""]) {
background-image:url('img/underline.png');
}
HTML:
<div contentEditable=true id="Control1" spellcheck="false" onkeyup="this.setAttribute('value', this.value);" value="">
</div>
<br>
<div contentEditable=true id="Control2" spellcheck="false" onkeyup="this.setAttribute('value', this.value);" value="">
</div>
<br>
<div contentEditable=true id="Control3" spellcheck="false" onkeyup="this.setAttribute('value', this.value);" value="">
</div>
<br>
<div id="border">
<div contentEditable=true id="note" spellcheck="false" onkeyup="this.setAttribute('value', this.value);" value="">
</div>
</div>
<br>
<button class="button" onclick="clearControl1('Control1'), clearControl2('Control2'), clearControl3('Control3'), clearNote('note')"/>Clear</button>
Javascript:
<script type='text/javascript'>
function clearNote(note)
{
document.getElementById(note).innerHTML = "";
}
function clearControl1(Control1)
{
document.getElementById(Control1).innerHTML = "";
}
function clearControl2(Control2)
{
document.getElementById(Control2).innerHTML = "";
}
function clearControl3(Control3)
{
document.getElementById(Control3).innerHTML = "";
}
</script>
Try that:
div:empty {
some stuff like color
}
Detaild information on Browser-Support here, where this snippet is from
https://css-tricks.com/almanac/selectors/e/empty/
in general, there are some css selectors doing help you react on advanced stuff like "the first" or "every second" etc..

how to display inner HTML output in text box

I am a beginner html and js programmer and I am trying to display inner HTML output into another TextBox.The code I am using does not give the output in the text box.Can anyone tell me what is wrong with this code?
this is my code
<script>
function my()
{
var a=document.getElementById("text").value;
document.getElementById("demo").innerHTML=a;
}
</script>
<input type="text" id="text" onKeyUp="my()"><br><br>
<span id="demo">
<input type="text" id="demo">
</span>
Any Help is Appreciated...Thanks
You have the same id attribute for both span and your input i.e "demo". Change the span id and try it
The below works:
<script>
function my()
{
var a=document.getElementById("text").value;
document.getElementById("demo").value=a;
}
</script>
<input type="text" id="text" onKeyUp="my()"><br><br>
<span id="demo_span">
<input type="text" id="demo">
</span>

Why isn't my javascript function pulling text from text areas?

I would like to take the text from two text areas and insert them concatenated into a following paragraph. I've made a calculator and odd/even validator, and had been able to draw the user input values just fine. Is there something different with text?
<p>
<textarea id="text1" rows="4" cols="50">Type here!</textarea>
<br>
<textarea id="text2" rows="4" cols="50">Now type something here!</textarea>
<br>
<button type="button" onclick="tafunc()">Click here to put text in paragraph below!</button>
</p>
<p id="result"></p>
<script>
function tafunc() {
var first, second, bothtextareas;
first = document.getElementById("text1").value;
second = doucment.getElementById("text2").value;
bothtextareas = first.concat(" ", second);
document.getElementById("result").innerHTML = bothtextareas;
}
</script>
document is misspelled in second assignment. and using value attribute for textarea is correct!
HTML:
<textarea id="text1" rows="4" cols="50">Type here!</textarea>
<br>
<textarea id="text2" rows="4" cols="50">Now type something here!</textarea>
<br>
<button id="btn1" type="button">Click here to put text in paragraph below!</button>
</p>
<p id="result"></p>
change your inline javascript to this:
var btn = document.getElementById("btn1");
btn.onclick = function () {
var first, second, bothtextareas;
first = document.getElementById("text1").value;
second = document.getElementById("text2").value;
bothtextareas = first.concat(" ", second);
document.getElementById("result").innerHTML = bothtextareas;
}
and here's a working jsFiddle

Set Input Value to Javascript Variable

Let's say I have a variable called x in javascript. How can I set the value of a text input (HTML) to that variable? For example:
The value of the input will now be Swag
<input type="text" value="Swag" />
But if I want the value to be a javascript variable? How do I do? Something like this? (I am just guessing, trying to make my point clear)
<input type="text" value="variable.x" />
You can set it in your javascript code like:
<input id="myInput" type="text" value="Swag" />
<script>
var test = "test";
document.getElementById("myInput").value = test;
</script>
This is a better solution and will probably avoid confusion for newbies...
<!DOCTYPE html>
<html>
<body>
<h1>Input and Display Message</h1>
<p>Enter a message</p>
<input type="text" id="msg" ><br>
<button onclick="displayMessage()">Click me</button>
<p id="showinputhere"></p>
<script>
function displayMessage(){
let themsg = document.getElementById("msg").value;
if (themsg){
document.getElementById("showinputhere").innerHTML = themsg;
}
else{
document.getElementById("showinputhere").innerHTML = "No message set";
}
}
</script>
</body>
</html>

Categories

Resources