I am pretty new to JavaScript and hope someone can help me to find a solution for the following:
I have a div with some text in it and an onclick event.
How can I manage that when you click on the div it shows the text inside the div within a textarea and a button above it - similar to how you can edit your own comments on this page here ?
How it looks on default:
<div class="clickable" onclick="TheFunctionIamLookingFor()">Some awesome text.</div>
How it should look on click:
<button type="button" id="myBtn">BtnName</button>
<textarea id="myArea">Some awesome text.</textarea>
Many thanks for any help with this, Tim
Try this
function youAreLookingFor() {
var awesomeText = $(this).html();
var $form = $(this).parent();
$(this).remove();
var textArea = '<button type="button" id="myBtn">BtnName</button>
<textarea id="myArea">'+ awesomeText +'</textarea>'
$form.append(textArea);
}
If you mean to give a different myBtn and myArea name for each clickable link, then you should give the clickable div an id too and start from there to create the id for the textarea and the button.
There is another way out to make what you want i.e. to make editable div using an HTML property contententeditable=true. You may use the following syntax:
<div contenteditable=true>
contents here
</div>
This facilitates copy+paste image in the div as well as textual edits i.e applying fonts on the texts using keyboard shortcut etc.
Check this fiddle
If you want to use only javascript DOM elements , then
<html>
<head>
<style>
.dip
{
display:none;
}
.dip1
{
display:;
}
</style>
<script>
function TheFunctionIamLookingFor()
{
document.getElementById("myArea").className="dip1";
document.getElementById("myBtn").className="dip1";
}
</script>
</head>
<body>
<p>Click the button to trigger a function.</p>
<div class="clickable" onclick="TheFunctionIamLookingFor()" >Some awesome text.
<button class="dip" id="b1" type="button" id="myBtn">BtnName</button>
<textarea class="dip" id="myArea">Some awesome text.</textarea>
</body>
</html>
Related
It is pretty simple. I just want to have a clickable word/button that will activate an image to appear into a div. What is the cleanest way to do this? thanks
Quickest way would be to add a blank image tag where you want the image to appear, and then use jquery to add/change the source
$('#button').click(function(){
$('#imgonclick').attr('src', 'http://example.com/myimage.jpg');
});
whhere #button is a button with class button, and #imgonclick is an img tag with class of imgonclick
Jquery is super easy, but if you have to stick to JavaScript you can try something like this:
<div id="image"></div>
<button id="imgBtn" type="button" onclick="displayBtn()">Click Me</button>
function displayBtn() {
document.getElementById("image").src = "something.gif";
}
OR... if the div already has an image src property set, just show it.
<div id="image" src="something.gif" style="display: none;"></div>
<button id="imgBtn" type="button" onclick="displayBtn()">Click Me</button>
function displayBtn() {
document.getElementById("image").style.display = "block";
}
At first I wanted to hide all the body and show only one image, but it seems that it's not possible since hiding the body with display:none would hide all of it's children. So I changed my code to just hiding the parameters I want to hide.
At Bottom line: I want to show the hidden content when I click on the content that is not hidden.
Here is my HTML Code
enter image description here
js code is
enter image description here
And finally css code is enter image description here
Even the code looks very simple but i'm struggling: when I click on the image, nothing happens.
I'm absolutely sorry if my question is not very well formulated, this is my first question on stackoverflow and I will be glad to make it more clear.
Thank in advance.
You have an error in JS, you have to use quotations marks.
... .style.display = "block";
<html>
<head>
<style>
p {
display: none;
}
</style>
</head>
<body>
<p>This is some random text</p>
<img id="click" src="" width="500px" height="500px">
<script>
var toggle = document.getElementById("click");
toggle.addEventListener("click", show);
function show() {
var p = document.getElementsByTagName("p")[0].style.display = "block";
}
</script>
</body>
</html>
Thank you all for your support!
I've actually found the answer. I was facing some problems with getElementsByTagName and getElementsByClassName since you actually had to use the for loop to display all of the elements. So I just used getElementById and used the "onclick" event in the HTML code.
Thanks!
I have used a little bit of JavaScript to change the contents of a paragraph element using a button. It's working fine, but I want to also have the button control the heading and an accompany picture. Point me in the right direction?
Here's the code I'm using to change the paragraph
<p id="change">....</p>
<button type="button" onclick='document.getElementById("change").innerHTML = "..."</button>
Thanks!
Try separating your JavaScript code into a <script> element after your <body> to make it easier to manage.Try something like this:
<p id="change">Existing Text</p>
<p id="anotherChange">Some Other Existing Text</p>
<button type="button" onclick="myFunction()">Click Here!</button>
<script>
function myFunction(){
document.getElementById("change").innerHTML = "New Text";
document.getElementById("anotherChange").innerHTML = "New Text Again";
}
</script>
I have a text to speak script and it is called by Javascript on HTML like this;
<head>
<script src="speakClient.js"></script>
</head>
<body>
<button onclick="speak('type text to speak here')">Talk</button>
<div class="article">
<p>Sample text is here!!</p>
</div>
<div id="audio"></div>
</body>
Currently when 'Talk' button is pressed, the predefined text (in this case "type text to speak here") will be speak by TTS.
How to change it when button is pressed, it speaks whatever text inside div.article instead of predefined text?
Edit: Link to JS https://github.com/kripken/speak.js/blob/master/speakClient.js
Thanks in advance
You can get the textual content of an element easily with jQuery:
var textToSpeak = $('div.article').text();
Then set the onclick function dynamically:
<button onclick="speak($('div.article').text())">Talk</button>
It is better than using pure JavaScript and innerHTML property, as potential HTML tags will be stripped with this solution.
<div class="article">
<script>var text = "Sample text is here!!";</script>
</div>
<button onclick="speak(text)">Talk</button>
Give an id to the <p> tag, and then you can pull out the value by calling innerHtml.
Example:
<button onclick="speak(document.getElementById('textToUse').innerHTML)">Talk</button>
<div class="article">
<p id="textToUse">Sample text is here!!</p>
</div>
Try adding the following script to the element of which you want the text read.
onclick="speak(this.innerText);"
I am pretty new to jquery and am trying to code this where each time you click on the content, the content is added to an existing div. However, the content will be constantly changing. I tried making it a variable, but it is still not working. Any help or advice is appreciated.
js fiddle: http://jsfiddle.net/tU2En/7/
html:
<button id="Add">Add Text</button>
<div id="content">
<p>Content 1</p>
</div>
script:
var text='#content p';
$(function () {
$('#Add').on('click', function () {
$('text').appendTo('#content');
});
});
Change:
$('text').appendTo('#content');
to:
$(text).appendTo('#content');
By quoting text, you're treating it as a string and jQuery is looking for an element named text.
jsFiddle example