Delete text between <p> by javascript - javascript

I have the following HTML,two buttons and a paragraph code, and javascript, like the following:
// HTML
<input type="button" onclick="insert()" value="insert"/>
<input type="button" onclick="delete()" value="delete"/>
<p id='text'>
Line 1
Line 2
</p>
//javascript
function insert(){
// ?
}
function delete(){
// ?
}
When the user clicks the delete button, the Line 1 and Line 2 will be deleted.
When the user clicks the insert button, the Line 1 and Line 2 will be inserted.
The Line 1 and Line 2 will be only insert when they are not between the <p id='text'>.
Can anyone help me?

For insert(), how about
document.getElementById('text').innerHTML = 'Line 1\nLine 2';
and for delete(), how about
document.getElementById('text').innerHTML = '';
Please note that delete is a JavaScript keyword (and it's even actually implemented, which is more than I can say for the utterly excessive amount of reserved keywords that JavaScript has). You will need to name your delete() function something else.

With jQuery you can try:
$("#text").text('');

You could something quick and easy with jQuery... adding ids to your buttons.
$('#delete').click(function(){
$('#text').html('');
})
$('#insert').click(function(){
$('#text').html('Line 1 Line 2');
})
http://jsfiddle.net/jasongennaro/MTJxH/1/

function insert() {
var para = document.getElementById("text");
if(para.innerHTML === "") {
para.innerHTML = "line1<br />line2";
}
}
function remove() {
document.getElementById("text").innerHTML = "";
}
However, please notice that I've changed the name of your delete function, because delete is a JavaScript keyword, and can't be used as the name of a function.
Here's a working example.

function insert() {
var p = document.getElementById('text');
if (p.innerHTML == '') {
p.innerHTML = 'Line 1<br />Line 2';
}
}
function delete() {
document.getElementById('text').innerHTML = '';
}

function delete(){
$('#text').html('');
}
function insert(){
if($('#text').text()=="")// add only if nothing inside
{
$('#text').html('Line 1 Line 2');
}
}

function delete()
{
var delMe = document.getElementById('text');
delMe.innerHTML = '';
}
function insert()
{
var insMe = document.getElementById('text');
insMe.innerHTML = "Line 1\r\nLine2";
}
Easy peasy.

Related

Copy the result of a function to the clipboard

Can someone tell me how to copy the result of a function to the clipboard?
After copying the result to the clipboard, I want to paste it after clearing the textarea.
function strReplace() {
var myStr = document.getElementById("source").value;
var newStr = myStr.replace(/&‌#‌1084‌;/g, "м")
.replace(/&‌quot‌;/g, '"');
if(document.getElementById("source").value == '') {
alert("Textarea is empty!");
return false;
} else {
// Insert modified string in paragraph
document.getElementById("myText").innerHTML = newStr;
taErase();
document.getElementById('button').focus();
}
}
Use this function and pass the value is to be copied as it's only argument.
function copyText (copyText = null){
let textArea = document.createElement("textarea")
textArea.value = copyText
textArea.style.position = "fixed"
textArea.style.left = "-999999px"
textArea.style.top = "-999999px"
document.body.appendChild(textArea)
textArea.focus()
textArea.select()
return new Promise((res, rej) => {
document.execCommand('copy') ? res() : rej()
textArea.remove()
//alert('Text Copied!')
})
}
I did some changes in your code to simulate a functional example:
Auxiliary function copyToClipboard to copy element value to clipboard
Auxiliary function getSource() to generate a source if is empty
Auxiliary function start() trigger the process manually
When the page finish load, the code will:
Check if textarea is empty and print in console (before was an alert)
Now press start button to init process and check if has something in source input
If hasn't any text in source input or is empty, generate one
When has an text in source input:
replace special chars
copy to clipboard
copy to textarea
focus the Click Me! button
Added a css background to change the button color to see the focus (Optional)
Some functions isn't necessary in your solution, just used it to build a functional example.
Good pratices:
Choose one possibility: In your code or use double quote " or single quote '
When post the problem try to post a functional exemple not just a part of code
Follow an example based on your question:
function strReplace() {
let source = document.getElementById("source");
let myStr = source.value;
let newStr = myStr.replace(/&‌#‌1084‌;/g, "м")
.replace(/&‌quot‌;/g, """);
if (myStr == "") {
console.log("Textarea is empty!");
} else {
copyToClipboard(source);
document.getElementById("myText").innerHTML = newStr;
document.getElementById("button").focus();
}
}
function getSource() {
let source = document.getElementById("source");
if (!source.value) {
source.value = "<!DOCTYPE html><html><head><title>Page Title</title></head>" +
"<body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>";
}
}
function start() {
getSource();
strReplace();
}
function copyToClipboard(element) {
element.select();
document.execCommand("copy");
console.log("Text copied to clipboad:\n" + element.value);
}
strReplace();
#button:focus {
background: yellowgreen;
}
#source {
min-width: 260px;
}
#myText {
min-height: 130px;
min-width: 260px;
}
<div>
<input id="source" placeholder="Source">
<button id="start" type="button" onclick="start()">Start</button>
</div>
<hr>
<div>
<textarea id="myText"></textarea>
</div>
<div>
<button id="button" type="button" onclick="strReplace()">Click Me!</button>
</div>

Multiple single onClick events

I'm just messing around on JavaScript. I want to create two single on-click buttons, each which serve separate functions. However, the first button's response is always that of the second if that group of code is in. It works fine independently.
I've double checked online and tried a few functions, but everything comes back to multiple-function buttons.
I'm not super advanced and I just do random programming for fun.
If the yes button is clicked, then "Good" should appear. If the no button is clicked, then "Bad" should appear.
When both groups of code are together, "Bad" is always shown, regardless of the button shown. If only the first group of code is isolated, then the result is "Good".
function myFunction() {
var str = "Good";
var result = str.link("https://www.allrecipes.com/search/results/?wt=authentic%20taco%20recipes&sort=re");
document.getElementById("happy").innerHTML = result;
}
</script>
<button onclick="myFunction()">No</button>
<p id="sad"></p>
<script>
function myFunction() {
var str = "Bad";
var result = str.link("https://www.tacobell.com/");
document.getElementById("sad").innerHTML = result;
}
Do you like tacos?
<br />
<button onclick="myFunction()">Yes</button>
<p id="happy"></p>
You can also use a single click event function for both of your buttons.
See below code -
function myFunction(elem) {
var btnHtml = elem.innerHTML;
var str = "Good";
var id = "happy"
if(btnHtml == "No"){
str = "Bad";
id = "sad";
}
var result = str.link("https://www.allrecipes.com/search/results/?wt=authentic%20taco%20recipes&sort=re");
document.getElementById(id).innerHTML = result;
}
Do you like tacos?
<br />
<button onclick="myFunction(this)">Yes</button>
<p id="happy"></p>
<button onclick="myFunction(this)">No</button>
<p id="sad"></p>
You can do something like this, one function for both onclick events.
HTML
<p>Click the button to trigger a function.</p>
<button onclick="myFunction('yes')">Yes</button>
<button onclick="myFunction('no')">No</button>
<p id="demo"></p>
Javascript
function myFunction(value)
{
document.getElementById("demo").innerHTML=value;
}
Here's the fiddle
http://jsfiddle.net/840Larsn/
It is because you are using Function constructor and the functions are created in the global scope and therefore the second function overwrites the first one.
You can refer to here to see the definition.
You can use jquery if you wish,its simple
$('.clickbtn').click(function(e){
var str,result ;
var data = $(this)
if(data.attr('data-id')==1)
{
str = "Good";
result = str.link("https://www.allrecipes.com/search/results/?wt=authentic%20taco%20recipes&sort=re");
$("#text").html(result)
}
else
{
str = "Bad";
result = str.link("https://www.tacobell.com/");
$("#text").html(result)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Do you like tacos?
<br />
<button class="clickbtn" data-id=1>Yes</button>
<button class="clickbtn" data-id=2>No</button>
<p id="text"></p>
You should name your function differently:
In fact when you declare the second function in your original code it overwrites the first one because they have the same name.
function myGoodFunction() {
var str = "Good";
var result = str.link("https://www.allrecipes.com/search/results/?wt=authentic%20taco%20recipes&sort=re");
document.getElementById("happy").innerHTML = result;
}
function myBadFunction() {
var str = "Bad";
var result = str.link("https://www.tacobell.com/");
document.getElementById("sad").innerHTML = result;
}
Do you like tacos?
<br />
<button onclick="myGoodFunction()">Yes</button>
<p id="happy"></p>
<button onclick="myBadFunction()">No</button>
<p id="sad"></p>

How to set angular variable value from JavaScript on Zeppelin

I am doing a visualization using D3 on zeppelin and I need to link Scala variable with javascript one.
In a simple way, I have the following three paragraphs:
1)
z.angularUnbind("aux")
z.angularBind("aux", "original value")
2)
%angular
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
if (document.getElementById("demo").innerHTML === ""){
document.getElementById("demo").innerHTML = "Hello World";
aux = "If"
}else{
document.getElementById("demo").innerHTML = "";
aux = "Else"
}
}
</script>
3)
z.angular("aux")
And I hope the following results:
Before click on "Click me" button I hope: aux = "original value".
After one click on "Click me" button I hope: aux = "If"
After two click on "Click me" button I hope: aux = "Else"
How to link javascript "aux" variable with angular's "aux"?
I finally found how to do that:
Paragraph 1) and 3) are equal to those showed in question. Into pragraph 2) aux variable is modified by write in a angularjs input field and reacting on change with z.angularBind(..) method. It allows to bind aux variable with another value. z.angularBind(..) method's third argument is the identifier of paragraph 3).
2)
%angular
<button onclick="myFunction()">Click me</button>
<input id="tb" class="hide" ng-model="aux" ng-change="z.angularBind('aux',aux,'20161224-171923_464920272')"></input>
<p id="demo"></p>
<script>
function myFunction() {
var element = $('#tb');
if (document.getElementById("demo").innerHTML === ""){
document.getElementById("demo").innerHTML = "Hello World";
element.val("If");
}else{
document.getElementById("demo").innerHTML = "";
element.val("Else");
}
window.setTimeout(function() {
return element.trigger('input');
}, 500);
}
</script>

Javascript save , erase and reload input value

I have a problem with my Script. I want to do the following steps in this order:
1. Save the text in the input field.
2. Delete all text in the input field.
3. Reload the same text that was deleted before in the input field.
The problem with my script is that the ug()- function writes undefined in my textbox instead of the string that should be stored in var exput. The alert(exput) however shows me the correct content.
Help would be very much appreciated. And I'm sure there is better ways to do that, I'm quite new to this stuff.
HTML
<textarea id="a" style="width: 320px; height: 200px;"></textarea>
<input type="checkbox" id="remember" onclick="merker();deleter();ug()" />
Javascript
function merker() {
var merkzeug = document.getElementById('a').value;
ug(merkzeug);
};
function deleter() {
if(document.getElementById('remember').checked == true)
{
document.getElementById('a').value = "";
}
else {document.getElementById('a').value = "";
}
};
function ug(exput) {
alert(exput);
document.getElementById('a').value = exput;
};
Your code is calling merker(); deleter(); ug(); in the onclick event, but ug() is already called by merker(). You should be doing this instead:
function merker() {
var merkzeug = document.getElementById('a').value;
deleter();
ug(merkzeug);
};
function deleter() {
if(document.getElementById('remember').checked == true)
{
document.getElementById('a').value = "";
}
else {document.getElementById('a').value = "";
}
};
function ug(exput) {
alert(exput);
document.getElementById('a').value = exput;
};
<textarea id="a" style="width: 320px; height: 200px;"></textarea>
<input type="checkbox" id="remember" onclick="merker();" />
I changed Your Javascript:
function merker() {
merkzeug = document.getElementById('a').value;//global variable without var
ug();//why You use it here? I think only for test. So delete it after.
};
function deleter() {
if(document.getElementById('remember').checked == true)
{
document.getElementById('a').value = "";
}
else {document.getElementById('a').value = "";
}
};
function ug() {
alert(merkzeug);
document.getElementById('a').value =merkzeug;
};
Problems with your code:
method ug was used with argument and without argument ( i changed to without )
to restore deleted value it must be saved to some variable, i saved to global merkzeug variable - this is not good practice but sufficient in this case
next i used merkzeug to restore value in textarea in ug() function
i do not know why You using ug() two times? maybe delete one of them is good thing to do.
In plunker - https://plnkr.co/edit/fc6iJBL80KcNSpaBd0s9?p=info
problem is: you pass undefined variable in the last ug function:
you do: merker(value) -> ug(value); delete(); ug(/*nothing*/);
or you set your merkzeung variable global or it will never be re-inserted in your imput:
var merkzeug = null;
function merker() {
merkzeug = document.getElementById('a').value;
ug(merkzeug);
};
function deleter() {
if(document.getElementById('remember').checked == true)
{
document.getElementById('a').value = "";
}
else {document.getElementById('a').value = "";
}
};
function ug(exput) {
if (typeof exput === 'undefined') exput = merkzeung;
alert(exput);
document.getElementById('a').value = exput;
};

Modify variable from input and place in new div based on input variable

This is related to my last questions, but that already had alot of answers so I did not want to modify it with more stuff to avoid confusion.
I can take the input from the input text with the id 'test', and I can display it on the div labeled 'result', but I am not able to modify the output to div
function createLinks()
{
var input = document.getElementById('test')
if(str.indexOf("VALUE")>=0){
var lin = "something";
}
else {
var lin = "somethingelse";
}
var div = document.getElementById('result');
div.innerHTML = lin.value;
}
The HTML is working currently as follows:
<input type="text" id="test" size="16" title="Coming Soon" onkeypress="createLinks()"/>
<input type="submit" style="margin-left: 10px;" value="Search" class="button1"/>
<div id="result"></div>
I work with mainly CGI and have very limited knowledge of JS so I am probably missing something simple or this plain wont work. Thanks for the help in advance.
I fixed your code to what I think you wanted:
function createLinks()
{
var lin;
var input = document.getElementById('test');
if(input.value.indexOf("VALUE")>=0){
lin = "something";
}
else {
lin = "somethingelse";
}
var div = document.getElementById('result');
div.innerHTML = lin;
}
What was wrong was that:
[1] str was not defined
[2] lin was not globally defined, so you couldn't access it.
I updated the code so that it will make result say something if the textbox has VALUE typed in it and somethingelse if it doesn't, and that you can also press the Search button instead of pressing a key.
Try This: str not defined and lin is the value.
function createLinks()
{
var input = document.getElementById('test')
if(input.value.indexOf("VALUE")>=0){
var lin = "something";
}
else {
var lin = "somethingelse";
}
var div = document.getElementById('result');
div.innerHTML = lin;
}

Categories

Resources