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>
Related
using alert of a button tag onclick action.
How to get the alert message content/text from another element by id or classname?
Edited:
I meant the button tag like the following code..
<button type="button" onclick="alert('Hello world!')">Click Me!</button>
I need to replace the string(Hello World) by the innerHTML of another element that is hidden.
I hope I understand your question correctly and that will help you further.
<!DOCTYPE html>
<html>
<body>
<h1>The onclick Event</h1>
<p>The onclick event is used to trigger a function when an element is clicked on.</p>
<p id="test">Click Test.</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
var test = document.getElementById("test");
alert(test.innerHTML);
}
</script>
</body>
</html>
I found this one less code/script and best option yet..!
<button type="button" onclick="alert(document.getElementById('test').innerHTML)">click</button>
<div id='test' style='display:none'>hiiiiii</div>
I'm just a beginner in Java scripting. I am creating a quiz page where all topics are listed in Alphabetical order (e.g. A, B, C...Z).
I would like to have the button disabled after the participant clicks-on one alphabet, but don't know where to insert the script for disabling the button.
This is the simple script:
<h1>What Can JavaScript Do?</h1>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button"
onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">
Click Me!</button>
I have referred this link, but as mentioned above don't know where to insert the disabling script. (http://stackoverflow.com/questions/2323948/disabling-the-button-after-once-click)
I will really appreciate if someone can help me out of this problem.
Regards,
Nitin
<h1>What Can JavaScript Do?</h1>
<p id="demo">JavaScript can change HTML content.</p>
<script type="text/javascript">
function btnDisable(id){
document.getElementById(id).disabled=true;
}
</script>
<button id="btn1" type="button"
onclick="btnDisable('btn1')">
Click Me!</button>
Similar to what Reena posted, except the use of the parameter can make the function usable for other questions, too.
<h1>What Can JavaScript Do?</h1>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" id="myBtn" onclick="disableButton()">Click Me!</button>
<script type="text/javascript">
function disableButton() {
document.getElementById("myBtn").disabled = true;
document.getElementById('demo').innerHTML = 'Hello JavaScript!';
}
</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
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>