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>
Related
So im working on this feature when user can edit the element, (HIS ID) the page has firewalls so its private it requires password to enter just to let you all know, but the problem is at the javascript part i think theres something generating an auto save input button that i cannot identify on the coding it only displays from the source.
explaining: theres one button that you can use to save the changes you made to the element (you can see it below at the input tag) then theres a button above it that i cannot see on the open code but it only displays at the souce and i don't know where it comes from) Please someone help me remove it, that would save me hours of work!
<!DOCTYPE html>
<script data-ad-client="ca-pub-7267901485160871" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<link rel='icon' href='favicon.png' type='image/x-icon'/ >
<script type="text/javascript">
function saveEdits() {
//get the editable element
var editElem = document.getElementById("edit");
//get the edited element content
var userVersion = editElem.innerHTML;
//save the content to local storage
localStorage.userEdits = userVersion;
//write a confirmation to the user
}
function checkEdits() {
//find out if the user has previously saved edits
if(localStorage.userEdits!=null)
document.getElementById("edit").innerHTML = localStorage.userEdits;
}
</script>
<div class="row">
<div class="column">
<div class="card">
<div class="container">
<h1 style="color: red;">ID</h1>
<div id="edit" contenteditable="true">
<body onload="checkEdits()">
<p contenteditable="true" class="price">2447597194</p>
</div>
</div>
<input type="button" class="w3-btn w3-black" value="Ruaj ndrysh" onclick="saveEdits()"/>
<p></p>
</div>
</div>
</div>
</div>
<div id="update"> - Edit the text and click to save for next time</div>
Well I think itsn't javaScript what is generating the input, only this line of code:
<div id="edit" contenteditable="true">
is what making the input editable.
and in saveEdits() function you are saving the edited info into the localStorage, tharefore you are keep seing it even after a reloading of the page...I think!
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 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 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>