I have a text. Inside, I want to ask the reader questions where answers will be inserted inside the text. And I want the questions to be prompted by a button and have the button disappear when the prompt is validated.
So what I have for now is this:
Once upon a time in <button onclick="prompt('Where do you live?')">Where do you live?</button>, a very beautiful place…
It gets me the button inside my text, the prompt I want, but how do I get the result of this prompt to replace the button when I close the prompt after clicking OK?
This onclick() does what I think you want.
Once upon a time in <button onclick="this.outerText = prompt('Where do you live?');">Where do you live?</button>, a very beautiful place…
Basically, it sets the value of the prompt to the outerText of the button. outerText replaces the entire button, while innerText would place it inside the button, if you want that instead. It would look like this:
Once upon a time in <button onclick="this.innerText = prompt('Where do you live?');">Where do you live?</button>, a very beautiful place…
Related
Hello Im new web developer. i get empty button error from wave.webaim.org - WCAG 2.0 Level AA Accessibility.
Thats the code.
<button type="button" role="presentation" class="owl-prev disabled h-hidden" title="none">
any help on that?
Thanks in advance.
"An Empty Button error means that one of the buttons present on the web page is empty or contains no text describing the function of the button. Or, if it’s an image button, the image contained in the button is missing alternative text."
Source: https://equalizedigital.com/accessibility-checker/empty-button/
It could be that there's no text on the button. If you don't want to put a visible text on the button, you could put a visually hidden text that is read by screen readers, sometimes called the sr-only class in css.
More info: How to hide a text and make it accessible by screen reader?
You need to have actual text inside the button. If you don't want to have a visible text because you style the button in a certain way, using PisteVW solution from above works just fine.
Alternatively, you can use the attribute aria-label="button text here" to give the button a label.
Also, you need to remove role=presentation as the button performs a clear action, it's not there to simply indicate presentational images, for example: https://www.w3.org/TR/wai-aria-1.1/#presentation
Im working on a function in wordpress that I wanna be able to click on a button, and when a button is clicked, the text inside the button changes and redirects the user to another page (I want to change the text inside the button from Create to Edit).
If I refresh the page or go back to the page, the text inside the button is not displaying the changed text. I want the text inside the button to always stay changed.
<a class="cc-btn">
<input id="texts" onclick="changeStyle()" value="Create"></input>
</a>
<script>
function changeStyle() {
document.getElementById("texts").value="newButtonValue";
window.location.replace("/xxxx/?page_id=xx");
}
</script>
If you would like that the changes will still remain once you refresh the page, you cannot do it using JavaScript only.
you will have to use the server side and save the new text and put it into the button value once the page is rendered. (or of course it`s possible to do something ugly like saving the data in a cookie and then use JavaScript only - but this is wrong )
Im not sure if i got your issue, but you could try it:
$(window).on('load',function(){
if(window.location.pathname == '/xxxx/?page_id=xx') {
$('#texts').val('Edit');
}
});
I have a page that displays fruitName, score, and comments (ex: "Apple", "3/5", "Juicy and sweet!"). On the bottom of the page, I want to create a "EDIT" button, which allows me to edit the score and comments by changing them into editable fields (i.e. text field for comment, drop-down menu of 1-5 scale for score), and the originally "EDIT" button now reads "SAVE CHANGES". I am using GAE+Python+Webapp2+Jinja2
What I have so far
<h4>{{fruitList["fruitName"]}}</h4>
Score:{{fruitList["score"]}}
Comments:{{fruitName["comments"]}}
<button type="submit" class="btn">Edit</button>
<button type="button" class="btn">Close</button>
Then, I am hoping to get something like:
<h4>{{fruitList["fruitName"]}}</h4>
Score:<input type=text>{{fruitList["score"]}}</input> #Preferably drop-down menu
Comments:<input type=text>value={{fruitName["comments"]}}</input>
<button type="submit" class="btn">Save Changes</button>
<button type="button" class="btn">Close</button>
Then once the Save Changes button is clicked, the original "display" page will show with Edit and close buttons on the bottom.
How can I implement something like this? I am trying solely by HTML without javascript, but unsure of feasibility. I want the page to remain stay put when "EDIT" is clicked (no redirects) and smoothly change from text display to text edit, or score.
Thank you in advance!
You need javascript for that.
The general idea is to initially hide the inputs and only show the text, and when the user clicks EDIT the inputs are revealed and the text is hidden. When the user clicks "Save Changes" hide the input and show the text, but copy the value to the text. When the user clicks "Close" hide the input and show the text, but copy the text to the input.
And of course, when the user clicks save changes send the changes to the server (if you need to).
Update:
By "copy" I mean you need to remember updating the text when the changes are saved, something like this:
$('#score-holder').text( $('#score-input').val() );
so that the text will hold the updated input
I have a textfield and a button on the page:
<textarea class="txCS" id="text-area"></textarea>
<span id="search-button">Search</span>
What I try is simple, write some text in the textfield and click "Search".
browser.TextField("text-area").TypeText("Some Text");
browser.Span("search-button").Click();
TypeText() works, I see my text gets written on the textfield, Click() also works because I see WatiN highlights it when it clicks the button, but nothing happens when it clicks the button.
When I click the button myself still nothing happens, but when I type something in the textfield manually and click Search then everything works, as if the page knows if a human is interacting with the page and allows searching...
I montiored the events fired when I type someting in the textfield and then tried to fire them using WatiN:
searchBox.FireEvent("onmouseover");
searchBox.FireEvent("onmousemove");
searchBox.FireEvent("onmousedown");
searchBox.FireEvent("onfocus");
searchBox.FireEvent("onmouseup");
searchBox.FireEvent("onclick");
searchBox.FireEvent("onkeydown");
searchBox.FireEvent("onkeypress");
searchBox.FireEvent("onkeyup");
searchBox.FireEvent("onchange");
searchBox.FireEvent("onblur");
That didn't work either. Am I doing something wrong here?
Just as a reference for others the problem with your code is that you are trying to click a span instead of a button. Unless you 100% sure that the clickable element is a span you should use the following code with Watin:
browser.Button("search-button").Click();
And that should do the trick
I'm trying to have users enter info into a form (via radio buttons), manipulate the input data, and write resulting text onto the middle of a web page--beneath the radio buttoned form. So I have variables assigned to whenever a user selects a radio button, the onClick event calling a function something like:
function saveValue1(value) {
someVariable=value;<br>
}
And when users click a Submit button, a function works like it's supposed to, ultimately writing an output string. The problem is how to write the string value in the middle of the page. I have this [pseudo]code at the end of the function (pretend the string I want to write to the page is named aVariable):
document.getElementById('aPlace').innerHTML=aVariable;
And of course there's HTML in the displayed page like this:
<div id="aPlace"></div>
After a user pressed the form's Submit button the correct output variable is displayed very briefly, and then disappears. Why is this? And how should I be writing this code instead?
Thanks for helping a newbie, as always.
The form is probably submitted. put a "return false" at the end to stop it submitting the form
It seems that the browser is refreshing? How is the form data handled?
If the form is needed only to add the text to the page, I would add a button
<button onclick="saveValue1("+value+");")>
and avoid submitting the form.