Develop Reference

How to make image give her name to text field then edit the name and save it? Plus delete button should remove picture

This one is very tricky and I cant imagine how to solve it... Request was "Double click on picture, then you get picture name in to text field. There you can change name and save it with button. Also there's another button which clicked you delete the picture."
At this moment I dont have much, it's just a guess what it should look like..
function rodytiViduryje(pav){
var paveikslas=document.getElementById("jap");
paveikslas.src=pav.src;
var aprasymas=document.getElementById("apr");
aprasymas.value=pav.title;
lastph=pav;
}
function keistiAprasyma(){
var NA=document.getElementById("apr");
lastph.title=NA.value;
}
function trintiPaveiskla(){
lastph.remove();
}
<div class="ketvirtas">
<!-- THIS PICTURE -->
<img id="jap" src="https://media.cntraveler.com/photos/60596b398f4452dac88c59f8/16:9/w_3999,h_2249,c_limit/MtFuji-GettyImages-959111140.jpg" alt=japonija class="b" style="width:780px;height:480px">
</div>
<div class="penktas">
<div class="aprasymas"> <!-- Buttons-->
<label for="tekstas">
<b>Paveikslo aprasymas</b>
</label><br/>
<input type="text" id="apr" />
<button id="saugoti" onclick="keistiAprasyma()">Išsaugoti aprašymą</button><br/>
<br>
<button onclick="trintiPaveiksla()">Trinti iš galerijos</button><br/>
</div>
</div>
Please share your ideas! :)

JS could be something like this (also made small changes to HTML):
document.addEventListener("DOMContentLoaded", function(event) {
let img = document.querySelector('#jap');
let descriptionInput = document.querySelector('#apr');
let saveButton = document.querySelector('#saugoti');
let deleteButton = document.querySelector('#trinti');
img.addEventListener('dblclick', function (e){
console.log
descriptionInput.value = this.alt;
});
saveButton.addEventListener('click', function(){
img.alt = descriptionInput.value;
});
deleteButton.addEventListener('click', function(){
img.remove();
});
});
<div class="ketvirtas">
<!-- THIS PICTURE -->
<img id="jap" src="https://media.cntraveler.com/photos/60596b398f4452dac88c59f8/16:9/w_3999,h_2249,c_limit/MtFuji-GettyImages-959111140.jpg" alt="japonija" class="b" style="width:780px;height:480px" />
</div>
<div class="penktas">
<div class="aprasymas"> <!-- Buttons-->
<label for="tekstas">
<b>Paveikslo aprasymas</b>
</label><br/>
<input type="text" id="apr" />
<button id="saugoti">Išsaugoti aprašymą</button><br/>
<br>
<button id="trinti">Trinti iš galerijos</button><br/>
</div>
</div>
My advice for future endeavours: scale your tasks to smaller ones. This will give you more valid results. Also you'll be able to learn while combining those multiple solutions to the one you need. I.e., your searches for this task could be:
Javascript double click event
Javascript get images' alt value
Javascript set images' alt value
Javascript remove DOM element

Call previous sibling as function parameter?

I'm building a wee letter-writing tool that will have a range of paragraphs the user can choose to add to a letter, but I worry that I'm doing it in a really inefficient way.
Currently, it's structured like this:
<p id="deposit-dispute" class="paragraph">This is a paragraph about deposits not being protected</p>
<button onclick="addPara(depositDispute)" class="add">Add paragraph</button>
and then in the Javascript, I create a const that pulls the inner HTML of that id:
const depositDispute = "\n" + document.getElementById("deposit-dispute").innerHTML + "\n";
which the addPara() function then adds to the textarea:
function addPara(text) {
document.getElementById("text-body").value += text;
}
But would there be a way to make the function just call whatever the previous p element had in it, rather than having to give them all unique IDs and creating a unique variable for them all?
Here it is in a codepen so you can see what I'm trying to do - the paragraphs to be added are in the accordion on the right: https://codepen.io/gordonmaloney/pen/GRWyjOP
Thanks a lot - and big apologies if this is a ridiculously amateurish question, I've spent ages trying to google a solution but can't find a thing!
G

Each box contains a paragraph and a button.
We can get all the boxes and each box paragraph and button, and finally add click event to the button to insert the paragraph html of this box to the textarea
// Get textarea and boxes
var textarea = document.getElementById('textarea');
var boxes = document.querySelectorAll('.box');
// get the button and the paragraph of each box
boxes.forEach(box => {
var btn = box.querySelector('.button');
var paragraph = box.querySelector('.paragraph');
// add the html of the selected box paragraph to the textarea
btn.addEventListener('click', () => {
textarea.value += "\n" + paragraph.innerHTML; + "\n";
});
});
<div class="wrapper">
<div class="box">
<p class="paragraph">This is paragraph 1</p>
<button class="button">Add to textarea</button>
</div>
<div class="box">
<p class="paragraph">This is paragraph 2</p>
<button class="button">Add to textarea</button>
</div>
<div class="box">
<p class="paragraph">This is paragraph 3</p>
<button class="button">Add to textarea</button>
</div>
</div>
<textarea name="" id="textarea" cols="30" rows="10"></textarea>

HTML textarea value is not getting from js in running time

I don't have too much experience working to JS but I am trying to get the value from textarea using JS when I am writing into textarea but it is not working the append function.
In HTML:
<textarea required="" name="wall_post_text" id="wall_post_text" placeholder="Write something..."> </textarea>
javascript code:
$(document).on('click', 'li.tag_system_search_people', function() {
var username = $(this).attr('data-people_username');
var user = $(this).attr('data-people');
var content = $('#wall_post_text').val();
content = content.replace(/#(\w+)/ig,'');
$('#wall_post_text').val(content);
$('#wall_post_text').append(" <span data-people='"+user+"' data-people_tagged='"+username+"' class='people_tagged' contenteditable='false'>"+username+"</span> ");
alert($('#wall_post_text').val());
$('#pg_social form#wall_post)
});
The alert is printing but text without the text in append function.

You are not doing it right.
For example:
// find elements
$('.elm_submit').on('click', function() {
/*var username = $(this).attr('data-people_username');
var user = $(this).attr('data-people');*/
// its value (You can too insert html in variable).
var content = $('#wall_post_text').val();
// insert value in div
$('.content').html(content);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Value -->
<textarea required="" name="wall_post_text" id="wall_post_text" placeholder="Write something..."> </textarea>
<!-- Get element -->
<div class="content">
</div>
<!-- Fire -->
<button class="elm_submit">
Click
</button>
and your postcode is incomplete
...
$('#pg_social form#wall_post ... <-
});

How to hide a parts of text after a special symbol, using html and Javascript?

I'm trying to hide a part of every user email, registered in a website.
So lets say I have get zero#example.com and I want to hide everything after the "#". And only show it if someone clicks on whats left of the email.
Any help would be appreciated.
This just hides everything.
<p>
<button onclick=".hide('#email')">Hide</button>
<button onclick=".show('#email')">Show</button>
</p>
<div id="email">
<h2>zero#example.com<h2>
</div>

Try following:
<script type="text/javascript">
function show(){
document.getElementById('trail').style.display = 'inline';
}
function hide(){
document.getElementById('trail').style.display = 'none';
}
</script>
<p>
<button onclick="hide()">Hide</button>
<button onclick="show()">Show</button>
</p>
<div id="email">
<h2>zero<span id="trail">#something.com</span></h2>
</div>

You can use split ( => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split ) if you know what character to expect. In this case:
var full; // let's say, it already has a value (f.e. zero#something.com)
var visiblePart = full.split("#")[0];
and eventually you can do something like this on click:
function show(){
document.getElementById("emailH2").innerHTML = full;
}
function hide(){
document.getElementById("emailH2").innerHTML = visiblePart;
}
and
<h2 id = "emailH2">zero#something.com<h2>

Javascript - copy text from one field to another using a button

I am trying to figure out how to insert text from one text field to another using a button.
This is what I have so far:
function copy(ID_value) {
var textToCopy = document.getElementById(ID_value).innerHTML;
var whereToCopy = document.getElementById("text");
whereToCopy.value += textToCopy;
}
HTML
<div id="opt">
<BUTTON id="1"onClick="copy(1);"> Option 1</BUTTON>
<BUTTON id="11"onClick="copy(11);"> Option 2</BUTTON><br>
<BUTTON id="2"onClick="copy(2);"> Option 3</BUTTON> or
<TEXTAREA ID="name" style="height:25px; width:300px;"></TEXTAREA>
<BUTTON id="3"onClick="copy(name);">Send</BUTTON><br>
<BUTTON id="4"onClick="copy(4);"> Option 4</BUTTON>
<BUTTON id="5"onClick="copy(5);"> Option 5</BUTTON>
<BUTTON id="6"onClick="copy(6);"> Option 6</BUTTON>
<BUTTON id="7"onClick="copy(7);"> Option 7</BUTTON>
<BUTTON id="8"onClick="copy(8);"> Option 8</BUTTON>
<BUTTON id="9"onClick="copy(9);"> Option 9</BUTTON>
<BUTTON id="10"onClick="copy(10);"> Option 10</BUTTON>
<p />
</div>
<TEXTAREA ID="text" style="height:100px; width:600px;">
</TEXTAREA>
Just as the buttons work, I need the "Send" button to send the text in the small field, to the large field, in any given order (Just as how each Option button inserts text in to the large field with proper spacing reguardless of order)
Any help would be greatly appreciated.

There are two problems in your question.
1) you are passing name not "name" so it will say name is undefined.
2) Because textbox has property value to get it's content your function is not working.
Leave your copy function as it is. Add one more function copyFromTextBox and call that on send button click.
<BUTTON id="3"onClick="copyFromTextbox();">Send</BUTTON><br>
function copyFromTextbox(id){
var textToCopy = document.getElementById('name').value;
var whereToCopy = document.getElementById("text");
whereToCopy.value += textToCopy;
}

I testing it desktop browsers: Firefox, Chrome, Safari.
<BUTTON id="3"onClick="if(document.getElementById('name').value!='')
text.value+=' '+document.getElementById('name').value">Send</BUTTON>
or
for(i=0;i<10;i++)document.querySelectorAll('button')[i].onclick=function(){
text.value+=this.innerHTML};
snd.onclick=function(){if(document.getElementById('name').value!='')
text.value+=' '+document.getElementById('name').value}
<div id="opt">
<button> Option 1</button>
<button> Option 2</button><br>
<button> Option 3</button> or
<textarea id="name" style="height:25px;width:300px"></textarea>
<input type="button" id="snd" value="Send"/><br>
<button> Option 4</button>
<button> Option 5</button>
<button> Option 6</button>
<button> Option 7</button>
<button> Option 8</button>
<button> Option 9</button>
<button> Option 10</button>
</div>
<br><br><textarea id="text" style="height:100px;width:600px"></textarea>
name. -not work. That question asked Jul 28 '14 at 4:55 Why that question is top on main page?

Your problem here is that your passing a number and not a string to the copy function.
Change copy(1) to copy('1') and things will work.

what you want to do is just copy the value of one text field into another. You can do this:
function copyToAnother()
{
var text1 = document.getElementById(id_of_first_text_field);
var text2 =document.getElementById(id_of_second_text_field);
text2.value = text1.value; // copy value of Ist field into second Field
}
and then on your copy button's onclick action reffer that function.

Try this code,This is a program similar to your question
<html>
<head>
<script>
function copy_data(val){
var a = document.getElementById(val.id).value
document.getElementById("text_to").value=a
}
</script>
</head>
<TEXTAREA ID="text_from" style="height:100px; width:600px;">
</TEXTAREA>
<TEXTAREA ID="text_to" style="height:100px; width:600px;">
</TEXTAREA>
<button onclick=copy_data(text_from)>Copy</button>
<html>

function copy() {
var areaA = document.getElementById("areaA");
var areaB = document.getElementById("areaB");
var valueA = areaA.value;
areaB.value = valueA;
}
just from a quick look you need to add "" to getElementById,
and use .value instead of innerHTML should work find.
here is a example. http://jsfiddle.net/6e67Y/