I have a text area, button to save the text that is type inside the text area and some other stuff on the page.
I want to click outside of the body and save the text that I type inside the text area; my body should act as button.
My problem is it does save the information but it affects everything that I have on my page e.g. wherever I click, it saves and I want it not to save when I click some other button - it should focus only outside the element.
What should I do to focus only outside the element because I even try function called stopPropagation.
var text_a = document.getElementById("myTextarea");
var btn_saveComment = document.getElementById("submit2");
function saveComments() {
text_a.style.display = "block";
$("#comment").text($(text_a).val());
var g = document.getElementById("checks5");
g.checked = true;
g.disabled = false;
$("#checks5").css({
backgroundColor: "#C40929"
})
}
document.addEventListener("click", function(e) {
e.stopPropagation();
text_a.style.display = "block";
$("#comment").text($(text_a).val());
var g = document.getElementById("checks5");
g.checked = true;
g.disabled = false;
$("#checks5").css({
backgroundColor: "#C40929"
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="wrapper">
<input type="checkbox" class="check_ticks" id="checks5">
<label for="checks5"></label>
</div>
<p id="comment" class="text_info"></p>
<textarea id="myTextarea" rows="5" cols="30" class="myText"></textarea>
<button class="dropbtn" id="submit2" onclick="saveComments()">Save Comment</button>
You can simply add onBlur attribute to the text area. Like this:
<textarea id="myTextarea" rows="5" cols="30" onblur="saveComments()" class="myText"></textarea>
See demo below:
var text_a = document.getElementById("myTextarea");
var btn_saveComment = document.getElementById("submit2");
function saveComments() {
console.log('saving...');
text_a.style.display = "block";
$("#comment").text($(text_a).val());
var g = document.getElementById("checks5");
g.checked = true;
g.disabled = false;
$("#checks5").css({
backgroundColor: "#C40929"
});
console.log('saved');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="wrapper">
<input type="checkbox" class="check_ticks" id="checks5">
<label for="checks5"></label>
</div>
<p id="comment" class="text_info"></p>
<textarea id="myTextarea" rows="5" cols="30" onblur="saveComments()" class="myText"></textarea>
<button class="dropbtn" id="submit2" onclick="saveComments()">Save Comment</button>
Using simple vanilla Javascript you can use the event to aid the process of using the document Body to work as the button in the original code by inspecting the event.target and event.currentTarget properties. When the event listener is bound to the body ( as below ) the currentTarget is the body element itself rather than any child element so that allows you to process the click on that itself quite easily.
( css to make this easier to observe within the snippet )
const d=document;
d.body.addEventListener('click',e=>{
let oText=d.querySelector('textarea#myTextarea');
if( e.target==e.currentTarget && oText.value!='' ){
let oPara=d.querySelector('p#comment');
oPara.textContent=oText.value;
let oChk=d.querySelector('input#checks5');
oChk.checked=true;
oChk.disabled=false;
oChk.style.backgroundColor="#C40929"
}
})
body{
height:100vh;
width:100%;
padding:0;
margin:0;
}
<div class="wrapper">
<input type="checkbox" class="check_ticks" id="checks5">
<label for="checks5"></label>
</div>
<p id="comment" class="text_info"></p>
<textarea id="myTextarea" rows="5" cols="30" class="myText"></textarea>
Related
I have an input box that changes another paragraph in my site with JavaScript. It works flawlessly, except for the fact that when I enter nothing in the input, it blanks out the paragraph.
I don't want this to happen. I've tried almost every piece of code I've found online to fix this issue but nothing has worked.
<div class="tasklist">
<p id="task1" style="color:#d3d3a3">You don't have any tasks.</p>
</div><br>
<script>
const element = document.getElementById("task1");
var task = document.input["task"].value;
function getInputValue() {
let value = document.getElementById("task").value;
element.innerHTML = (value);
document.getElementById("task1").style.color = "white";
}
</script>
Enter a task:<br>
<input type="text" id="task" name="task" placeholder="Pay Bills">
<button onclick="getInputValue();" onclick="changeColor()">+ Add</button>
<div id="tasklist">
<p id="msg" style="color:red">You don't have any tasks.</p>
</div>
<br>
<script>
const element = document.getElementById("msg");
element.style.display = "none";
function add() {
let value = document.getElementById("task").value;
if (value && value.trim() != "") {
document.getElementById("task").value = "";
element.style.display = "none";
const taskContainer = document.getElementById('tasklist');
const task = document.createElement('p');
task.textContent = value;
taskContainer.append(task)
} else {
element.style.display = "block";
}
}
</script>
Enter a task:<br>
<input type="text" id="task" name="task" placeholder="Pay Bills">
<button onclick="add();">+ Add</button>
First of all add value checker - it will prevent from setting innerHTML as "".
Secondly i think You want to add element with another task, not removing older ones.
use .append() to add at the end of parent or prepend() to add at the begginning of parrent.
<div class="tasklist"><p id="task1" style="color:#d3d3a3">You don't have any tasks.</p></div><br>
<script>
const element = document.getElementById("task1");
var task = document.input["task"].value;
function changeColor(){console.log("color")};
function getInputValue() {
let value = document.getElementById("task").value;
if(value.length>0){
element.append(
Object.assign(
document.createElement("p"),
{textContent:value}
)
);
document.getElementById("task1").style.color = "white";}}
</script>
Enter a task:<br>
<input type="text" id="task" name="task" placeholder="Pay Bills">
<button onclick="getInputValue();changeColor()" >+ Add</button>
if You rather want to replace Your first child then
<div class="tasklist"><p id="task1" style="color:#d3d3a3">You don't have any tasks.</p></div><br>
<script>
const element = document.getElementById("task1");
var task = document.input["task"].value;
function getInputValue() {
let value = document.getElementById("task").value;
if(value.length>0){
element.replaceChild(Object.assign(document.createElement("p"),{textContent:value}),element.firstChild);
document.getElementById("task1").style.color = "white";}}
</script>
Enter a task:<br>
<input type="text" id="task" name="task" placeholder="Pay Bills">
<button onclick="getInputValue()" >+ Add</button>
How can I make this code work well with the list printing the result on the same line.
<html>
<body>
<div>
<input id="toDo" type="text" placeholder="Add an item!" required>
<button onclick="submitText()">Submit</button>
</div>
<div><ol align="center" id="probody"></ol></div>
<script>
const mainBody = document.querySelector('#probody');
function submitText() {
mainBody.innerHTML = '<li></li>'
const text = document.getElementById("toDo").value;
const myText = document.createTextNode(text);
mainBody.appendChild(myText);
}
</script>
</body>
</html>
Few things:
You overwrite the contents of the previous list when you do mainBody.innerHTML = '<li></li>'.
It is not semantically correct to add a text node to an ordered list. Instead, create a li element and append the text node to the li.
Try this instead:
<html>
<body>
<div>
<input id="toDo" type="text" placeholder="Add an item!" required>
<button onclick="submitText()">Submit</button>
</div>
<div><ol align="center" id="probody"></ol></div>
<script>
const mainBody = document.querySelector('#probody');
function submitText() {
const text = document.getElementById("toDo").value;
const myText = document.createElement("li");
myText.appendChild(document.createTextNode(text));
mainBody.appendChild(myText);
}
</script>
</body>
</html>
Added few things:
remove the value of input when button is clicked
check if length of input is greeter then 1
event listener when enter key is pressed
<html>
<body>
<div>
<input id="toDo" type="text" placeholder="Add an item!" required>
<button id="btn">Submit</button>
</div>
<div><ol align="center" id="probody"></ol></div>
<script>
const mainBody = document.querySelector('#probody');
function submitText() {
var input = document.getElementById("toDo")
if(input.value.length < 1 || input.value.replaceAll(" ", "") < 1) return; // check if the input value length is greeter then 1 character
const myText = document.createElement("li");
myText.appendChild(document.createTextNode(input.value));
mainBody.appendChild(myText);
input.value = ''; // clear the value input
}
document.getElementById("btn").addEventListener("click", submitText); // save the input value when button is clicked
document.getElementById("toDo").addEventListener('keypress', function (e) {
if (e.key === 'Enter') submitText();
}); // save the input value when enter key is pressed
</script>
</body>
</html>
Change
mainBody.innerHTML = '<li></li>'
to
mainBody.innerHTML += '<li></li>'
I'm new to JavaScript and I was trying to manipulate the value of an HTML h2 element with the class of "text" when the users clicks on the button with the id "push" and change it to the value of the input class="inputV", however i noticed that when there's no value in the input field the whole block just disappears so I tried to return a different value if the input is not true! so how do i go out about doing this! that's what I've tried so far.
function input(){
var inputValue= document.getElementById('inputV').value;
var text = document.querySelector('.text').textContent;
if (inputValue){
text = inputValue;
}else{
text = 'Null';
}
return text;
};
document.getElementById('push').addEventListener('click',input);
<div class=container><h1>JavaScript OOP</h1>
<div>
<form class="input">
<input id="inputV" type="text" name="name" placeholder="Enter your Name">
</form>
</div>
<div><h2 class="text">Results</h2></div>
<button id="push" value="Sign me in" onclick="input()">Sign me in</button>
</div>
Once you set onclick="input()" for the button you don't need to extra define an event listener. Also you can make the function body a bit shorter
function input(){
var inputValue= document.getElementById('inputV').value;
var text = document.querySelector('.text');
text.textContent = inputValue || 'Null';
};
// document.getElementById('push').addEventListener('click',input);
<div class=container><h1 class="text">JavaScript OOP</h1>
<div>
<form class="input">
<input id="inputV" type="text" name="name" placeholder="Enter your Name">
</form>
</div>
<div><h2 class="text">Results</h2></div>
<button id="push" value="Sign me in" onclick="input()">Sign me in</button>
</div>
Initialization of text is not needed, just declare it.
Replace your return text with assignment to <h2>as below
function input(){
var inputValue= document.getElementById('inputV').value;
//var text = document.querySelector('.text').textContent;
var text;
if (inputValue){
text = inputValue;
}
else{
text = 'Null';
}
// return text;
document.querySelector('.text').textContent = text;
}
document.getElementById('push').addEventListener('click',input);
Ok here is what I was trying to do... Create a delete button along with edit by using DOM while creating a paragraph. But delete button always seems to be deleting first paragraph instead of deleting the corresponding paragraph.. here's my code:
Javascript:
function writePara()
{
var comment = document.getElementById("usrinput").value;
var newParagraph = document.createElement('p');
newParagraph.textContent = comment;
document.getElementById("updateDiv").appendChild(newParagraph);
var button = document.createElement("button");
var Btext=document.createTextNode("EDIT");
button.appendChild(Btext);
document.getElementById("updateDiv").appendChild(button);
button.onclick =
(
function()
{
var edit = prompt("Type to edit", "");
newParagraph.innerHTML = edit;
}
);
var button2 = document.createElement("button");
var Btext2=document.createTextNode("DELETE");
button2.appendChild(Btext2);
document.getElementById("updateDiv").appendChild(button2);
button2.onclick =
(
function ()
{
var items = document.querySelectorAll("#updateDiv p");
if (items.length)
{
var child = items[0];
child.parentNode.removeChild(child);
}
button.parentNode.removeChild(button);
button2.parentNode.removeChild(button2);
}
);
addBr();
}
And the HTML:
<body onload="radio()">
<div id="paraButton" align="left">
<form><h3>Enter your Paragraph content here:</h3>
<textarea cols="20" rows="10" id="usrinput">Enter your texts here...</textarea>
</form>
<form id="one"><input type="button" value="Apply" onclick="writePara()"/></form>
<div id="updateDiv" name ="update"><h1>Space for Paragraph</h1> </div>
</div>
<div id="radioButton">
<h3>Type your radio button here:</h3>
<input type="text" name="option" id="option" value="Example 1" />
</br></br>
<button id="AddButton">Add</button>
<button id="RemoveButton">Remove</button>
</br></br></br></br></br></br></br></br>
<div id="updateDivRadio"><h1>Space for Radio Button</h1></div>
</div>
</body>
P.S: the radio() function is working fine this is just a segment that I'm having problem with.
Ok I got it working with the help of others so decided to share here...
Changing button2.onclick to this works.
button2.onclick =
(
function ()
{
newParagraph.parentNode.removeChild(newParagraph);
button.parentNode.removeChild(button);
button2.parentNode.removeChild(button2);
}
);
i have a div tag where i entered sime text. now i want, as the user clicks on the button, a cursor should pop-up and user edit the text. as user clicks on save button the text should displays min the div tag inplace of old text..
my div tag is as:
<div id="topdiv" style="color:Blue" onmouseover="button1();">
<input type="button" id="btndiv" type="hidden" onclick="edit1();"/>
Div Tag
</div>
here i want to have a cursor when user clicks edit button and as user ebters text and clicks save the ' div tag ' text should get replaced by new text..
how this can be done using java script..
What you are doing makes no sense from either a technical or semantic view. Just use a textarea.
<textarea id="content" value="sample text" disabled="true" /></textarea>
<input type="button" id="edit" value="edit" onClick="edit()" />
<input type="button" id="save" value="save" onClick="save()" />
function edit() {
document.getElementById('edit').style.display = 'none';
document.getElementById('save').style.display = 'block';
document.getElementById('content').disabled = false;
}
function save() {
document.getElementById('save').style.display = 'none';
document.getElementById('edit').style.display = 'block';
document.getElementById('content').disabled = true;
}
#content {
width: 300px;
height: 200px;
}
#edit, #save {
padding: 2px;
width: 50px;
}
#save {
display: none;
}
Example here
// This sample code is with prompt (popup input) if you want to use textbox, the code to be replaced accordingly.
<div id="topdiv" style="color:Blue" onmouseover="button1();">
<input type="button" id="btndiv" style='display:hidden' onclick="edit1();"/>
<div id="text1"> </div>
</div>
<script>
function button1()
{
document.getElementById ("btndiv").display = '';
}
function edit1()
{
var val = prompt ("Enter some value");
document.getElementById ("text1").innerHTML = val;
document.getElementById ("btndiv").display = 'hidden';
}
</script>
I suggest creating an internal div enclosing just the text, like this:
<div id="topdiv" style="color:Blue" onmouseover="button1();">
<input type="button" id="editbtndiv" onclick="edit1();" value="edit"/>
<input type="button" id="savebtndiv" onclick="save1();" value="save"/>
<input type="text" id="inputdiv" style="display:none;" />
<div id="divtext"> Div Tag </div>
</div>
Then, to display the input field and hide the text:
var editObj = document.getElementById("editbtndiv");
editObj.style.display = "none";
var saveObj = document.getElementById("savebtndiv");
saveObj.style.display = "block";
var inputObj = document.getElementById("inputdiv");
inputObj.style.display = "block";
var txtObj = document.getElementById("divtext");
txtObj.style.display = "none";
Then user does his job, clicks save and you can hide the input field and show the text:
var editObj = document.getElementById("editbtndiv");
editObj.style.display = "block";
var saveObj = document.getElementById("savebtndiv");
saveObj.style.display = "none";
var inputObj = document.getElementById("inputdiv");
inputObj.style.display = "none";
var txtObj = document.getElementById("divtext");
txtObj.value = divObj.value;
txtObj.style.display = "block";