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);"
Related
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 textarea where i need to set some html text
<textarea id="text"></textarea>
<div id="elem">
<p>text</p>
<hr />
<br />
<p> some text</p>
</div>
..
$('#text').val($('#elem').html());
when I do this it's put text with html tags instead of parse it and put like a plain text.
i also tried functions append(), html(), text(). none of them helps me
text() worked for me. See https://jsfiddle.net/mgLp90em/.
What is the jQuery version you are using?
I'd recommend to use a contenteditable div element instead of a textarea as follows:
<div class="text-area" contenteditable>
<h1>Your content here</h1>
</div>
See JSfiddle demo
This should do the trick, gets only text from the children within your #elem:
$('#text').val($('#elem').children().text());
FIDDLE
I am stuck with this thing.May be an immature question.I dont know,I am pretty new to programming.I want to get a particular elements inner html from DOM of the page.The problem is the page is so complex it has so many classes subclasses href,span and all kind of things.Here is what it looks like from the POINT OF VIEW OF MY REQUIRED CLASS(there are a lot of other class and id's but this is the navigation to my required class,I skipped others.)
<html>
<head></head>
<body>
<div class=
<span style=
<iframe class=
#document
<html id=
<body class=
<div class=
<div id=
<div id=
<div class=
<div class=
<span id=
<a class=
<div class= "required class"
</div>
</a>
<span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</iframe>
</span>
</div>
</body>
<html>
Is there anyway to get the particular element using getelementbyID,getelementsbyClassName or any javascript property ?
Is this the correct one ?
document.getElementById('main').getElementsByClassName('test');
IF so how ?
I am not getting any output so I was was wondering this method is right or not..
Thanks in advance.
Assuming that your iframe is loaded from the same domain and you want to access the contents within this iframe, you will have to do something like:
document.getElementsByTagName('iframe')[0].contentWindow.document.getElementsByClassName('required class');
Take a look at this jsFiddle for example which loads fiddle.jshell.net in its iframe and applies a red color to the first editor found. Code of which is as belows:
document.getElementsByTagName('iframe')[0].contentWindow.document.getElementsByClassName('CodeMirror-scroll')[0].style.backgroundColor="red";
If you want the inner HTML of a DOM element then here is what you can do,
First access the element by it's id and use innerHTML to get the HTML content inside of it as,
var x = document.getElementById("main").innerHTML;
alert(x);
You are not getting proper output because you are not referencing the object and not accessing it's HTML content with innerHTML
EDIT: To access elements by class names you can use below script,
var x = document.getElementsByClassName("main");
for(var i=0;i<x.length;;i++){
alert(x[i].innerHTML);
}
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>
I have a bit of a problem and I'm not sure if it's possible with js.
Lets say I have a p Element.
<p class="test> text text text </p>
Is it possible that jquery would be able to turn the statement above into this.
<div class="new_created">
<p class="test> text text text </p>
</div>
All on run-time and assuming I can't manually modify it myself.
Would appreciate any help on this. Thanks
You can use .wrap() wrap elements with another element
$('.test').wrap('<div class="new_created"/>')
Demo: Fiddle
Suppose your HTML looks like this
<div>
<p class="test">text text text</p>
</div>
Then, you can do
$('.test').wrap($('<div class="new_created">'));