I'm trying to understand and figure out if the code generated by JavaScript will provide info for screenreaders like regular HTML tags. I'll show you what I mean.
I want my div1 text to change relatively.
<script>
function changeText()
{
document.getElementById('div1').innerHTML = '<input type="button" onclick="changeText2()" value="Change Text2" />';
}
function changeText2()
{
document.getElementById('div1').innerHTML = '<input type="button" onclick="changeText()" value="Change Text" />';
}
</script>
<div id="div1">
<input type='button' onclick='changeText()' value='Change Text'/>
</div>
It does the trick and I'm very excited by that, because I'm very new to coding, but I want my site to be adoptable for blind people who use screenreaders. When I checked the generated HTML code, the code does not change by pressing the button, so I assume the screenreaders will be reading this first button(in the HTML layout) without paying any attention for the generated code.
If I'm right, what can I do about it? Is there any way to change text like that.
Look at Accessible Rich Internet Applications (WAI-ARIA).
Related
I am attempting to create a textbox for a website that can change the text to whatever format the user wishes. However, this is not working. This is my code so far.
<body>
<h1><b><u> A Simple Word Processor </u></b></h1>
<script>
function myFunction() {
document.getElementById("edit").style.fontstyle = "italic";
}
</script>
<button type="button" onclick="myFunction()"> Italics </button>
<br> <br>
<textarea id="edit" rows="10" cols="100"></textarea>
</body>
</html>
Like everybody says, don't reinvent the wheel and pick something like TinyMCE or my favourite WysiHTML.
However, your error is that Javascript uses camelcased CSS properties, so...
document.getElementById("edit").style.fontstyle = "italic";
should be changed to
document.getElementById("edit").style.fontStyle = "italic";
I'm looking for a way to add html elements to a form by using for example a button. I've been looking on a few examples out there but they are very big (like 3+ times the size of the actual form I want to build) so I'm wondering if there is a better way of fixing this.
My idea is something like this:
<form action='blabla.php' method='post'>
<!-- Insert button here to add a new element -->
<input type='text' name='desc_1'>
</form>
And by clicking the button, the following should be rendered:
<form action='blabla.php' method='post'>
<!-- Insert button here to add a new element -->
<input type='text' name='desc_1'>
<input type='text' name='desc_2'>
</form>
I want a new input field to be created, without the page having to reload and loose ev data entered in the form. Guessing this is something I should achieve through javascript or even jquery. I know how to edit an existing input field but I have no clue on how to create a new one and make it follow its numberrange. Anyone have an idea on how to apporoach this with a javascript function? Or should I invest in some time researching jquery for a smoother solution?
You can do
html
<button onclick="create();">Create Field</button><br><br>
<form id="frm">
<input type='text' name='desc_1' placeholder="Input Field 1"><br>
</form>
javascript
var count=1;
function create(){
//alert();
count++;
document.getElementById('frm').innerHTML+='<br/><input type="text" id="'+count+'" placeholder="Input Field'+count+'" /><br/>';
e.prventDefault();
}
FIDDLE
$("button").click(function(){
var count = $("input").length + 1;
$("form").prepend("<input type='text' value='desc_" + count + "' name='desc_" + count + "'><br>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<button>add input</button>
<br>
<form action='blabla.php' method='post'>
<input type='text' name='desc_1'>
</form>
EXAMPLE
AJAX is your answer. It will let you update a website content without needing to refresh the page over and over again.
the salution your looking for is posible with XMLhttpRequest.
http://www.w3schools.com/xml/xml_http.asp
http://www.w3schools.com/dom/tryit.asp?filename=try_dom_xmlhttprequest_first
good luck
I want to make a Skin Viewing Website for the game Minecraft and I need to have a simple form that displays an image from Minotar.net and then displays the entered username with thier image / skin under the form
The form should add the username to the end of the url, for example:
Form text submitted: Notch
Changes: img src="https://minotar.net/skin/username" to img src="https://minotar.net/skin/Notch"
and displays the image below the form.
--
The code that I tried
<div class="page-header">
<h2>Enter a Minecraft Username to download skin:</h2>
</div>
<div class="input-group">
<input type="text" id="page" class="form-control">
<span class="input-group-btn">
<input type="submit" value="Download Skin!" onclick="goToPage();" class="btn btn-success">
<img id="page" src="http://minecraft-skin-viewer.com/skin.php?user=">
</span>
Javascript:
function goToPage() {
var page = document.getElementById('page').value;
img.src = "http://minecraft-skin-viewer.com/skin.php?user=" + page }
JSfiddle http://jsfiddle.net/4dqbP/14/
Thanks!
Wow, you're doing well for just starting JavaScript. I found a few errors in your code and corrected them in a JSFiddle at the end of my answer. Here are your mistakes, for future reference:
Unlike classes, ids MUST be unique. You had two ids both named "page." This is not valid HTML, and will cause errors.
You used img.src. This is allowed, but only if img is a variable. In the fiddle, I made img a variable, by using the getElementById method.
You should close your img tags and input tags. People will say "what do you mean, close those tags?" Well, just for consistency, and making XHTML easier to learn later, it's a good habit to make sure your input tag looks like this:
<input type="text" id="textbox1"/>
Not this:
<input type="text" id="textbox2">
(Notice the missing "/" at the end.)
Other than that, I just cleaned up some formatting. You're good to go!
JSFiddle Here
Hi I have a problem that I cannot work out I have a HTML button code is below when I click this I want a java script function to run that will display links on the page and then when I press the second button I want a separate set of links to display any ideas how to do this all my HTML elements are within a
my HTML button is this i have put type on the button because it was acting like a submit button when it was within a form.
echo"<button type=\"button\" id=\"1\" onclick =\"display(firstbox)\">";
echo "Firstbox";
echo "</button>";
this is the div that everything is displayed within
echo "<div id=\"links\">
echo "</div>";
my JavaScript function is this
$("#1").click(function(){
$("#links").text("'<div id="id">' heeellllooooo '</div>' ");
});
when I try this nothing is displayed when I get rid of the HTML elements it shows the hello is it because I have used .text do I need to change this to something else or is there a better way to do this using a different javascript or jquery functions or maybe css anything would be great
any ideas or help would be much appreciated i just cant seem to get this to work no matter what i try
in the end i would like these links within the section it says hello these are the links
<br/>
<br/>
Guide to Producing a Video
<br /><br />
Guide to Producing a Academic Exercise
<br /><br />
Questionnaire
<br /><br />
Guide to Producing a Video
<br /><br />
Guide to Producing a Academic Exercise
<br /><br />
Questionnaire
Use .html(). $.html() treats the string as HTML, $.text() treats the content as text.Try this:
$("#1").click(function(){
$("#links").html("<div id=id>heeellllooooo</div>");
});
Try this, DEMO
$("#1").click(function(){
$("#links").html('<div id="id">heeellllooooo</div>');
});
problem in quotes and tag
$("#links").html("<div id='id'> heeellllooooo </div>");
if id is a javascript variable.
My button with id "jump-button" is not working at all. Whenever it is clicked nothing will happen. (I have added a alert(); to the onclick attribute so I know when the button is working.
The other two buttons (next and prev) are working absolutely fine.
<body>
<div id="fact">Fact #1: In 2002, the most popular boat name in the U.S. was Liberty</div>
<input id="next" type="image" src="images/next-button.png" name="next" value="Next" onClick="num++;document.getElementById('fact').innerHTML=getFact(num);"/>
<input id="prev" type="image" src="images/prev-button.png" name="previous" value="Prev" onClick="num--;document.getElementById('fact').innerHTML=getFact(num);"/>
<p id="jump-text">Jump To Fact #</p>
<input id="textarea" type="text" name="factNumber" />
<input id="jump-button" type="image" src="images/jump-button.png" name="jump" value="Jump" onClick="alert();num = document.getElementById('textarea').value;document.getElementById('fact').innerHTML='getFact(num);"/>
</body>
External JS File (it has been inported in the HTML header)
facts = [element1, element2, ... wayy too many elements to have them all here];
var num = 1;
function getFact (num){
return 'Fact #' + num + ' ' + facts[num-1];
}
As you can see, this is a very simple app being built (something that just runs through various interesting facts). I am fairly new to javascript, so please excuse me if I made a very blatant error.
My CSS file is very nice and simple too, I doubt it it causing the trouble, but if it is required I will shot it upon request.
Lastly, the rest of the html <head> is also very simple (only consists of some meta data, title, css and javascript imports).
If anyone needs more information to help me get the "jump" button working, please ask.
You have a stray ' in your inline onClick attribute.
// ---------------------------------------------------v
onClick="...document.getElementById('fact').innerHTML='getFact(num);"