I am trying to learn basic javascript and using jsfiddle as my tool of choice to play around with code. I've found I really learn through working examples I can see output for.
However, I find when I do something along the lines of the following, both lines are displayed on the same line:
document.writeln("This is Line One");
document.writeln("This is Line Two");
i.e. http://jsfiddle.net/u1sonderzug/NVSsy/
I understand as a beginner I might be going about doing this in the completely wrong way, so I'd like to understand best practices.
In html, <br> is for new lines.
document.writeln("This is Line One<br>");
This is not an issue of Javascript but an issue of HTML : println adds a carriage return at the end of the text but it has no effect in HTML because html doesn't take care of those characters. So you have to to :
writeln("....<br/>");
where is the html tag for carriage return;
OR
<pre>
writeln("...");
</pre>
*if your javascript is wrotten in the html page. Where is a balise to say to html he has to read every character including the carriage return added by writeln.
Anyway you should try to find tutorials for html and DOM, it's far more powerfull that this println and it's standard :)
Related
I'm building a Javascript based UI that generates code based on the UI. I got the code generation working. the code is saved in a string. I tried formatting it, indenting it, but I don't know how anymore. Is there a way to put out the code formatted?
For example if I have this string:
"<body><div><h1>Hi</h1></div></body>"
being output like this:
<body>
<div>
<h1>
Hi
</h1>
</div>
</body>
right now I'm outputing like this:
$(".output").text(string);
Take a look at code tag in html. Show your string wrapped by code tags
<code>your string</code>
Or use text area. https://jsfiddle.net/sureshatta/k1atgn6o/1/
If you are trying to achived the formatted output please have a look at Template literals
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
.text() use for Change the Text of any Tag.
$(".output").text(string);
.html() is use for Add the String with the Tag.
$(".output").html(string);
If you want to display code that is correctly indented and colorized, you can use a library to do that, such as highlighjs.
I'm not sure it does auto indentation, but the algorithm for that isn't that hard: just add newline and enough spaces when opening a new html tag (recursion will make this way easier).
Also, you can use js-beautify.
On the results page of this quiz, when you get an answer wrong, there's explanatory text given. For some reason, html tags like <strong> are stripped out of that text, even though they display correctly everywhere else in the quiz. I've checked both js files but can't find the culprit. Any ideas?
I'm trying to add formatting in this line of Q/A js
$('#quiz-form').append('<p class="special" id="special_'+key+'" ><strong>Correct answer(s): '+answer+'</strong> '+special+'</p>');
I think you should replace the " with this " in this Q/A.js file for content
this link has list the characters which
http://www.ascii.cl/htmlcodes.htm
check this example
JS Fiddle
I have a ( probably very unclean) script that I intend to convert letters put into a text field into html image tags with corresponding pathways. I know there are probably easier ways of doing this, PHP for example however I am using it as a bit of an experiment to familiarise myself further with JS/Jquery. I have overcome a few obsticles to get where I am now as most of this is new ground for me.
In some cases the letters will have multiple images associated with them that will be selected at random so there are a couple of lines included which do this. These are fine however, the issue comes with the section of code that replaces the letters from the text field with the text and variables that make up the image tag. Whilst they work fine individually, when I want to convert multiple letters the replace overwrites instances of that letter in the previously generated image tag. Any ideas can I stop this? I've tried shifting the points at which the script occurs around but it seems the whole thing is somewhat fragile and haven't been able to create a workable solution.
Code in question:
// replace all instances within variable to generate thumbs
final_result = result.replace(/a/g, str_start+chosen_folder+"a"+random_variation+str_end)
.replace(/e/g, str_start+chosen_folder+"e"+random_variation+str_end);
JS Fiddle here: http://jsfiddle.net/N77wZ/
Many thanks in advance !
Do only a single replace:
final_result = result.replace(/a|e/g, str_start+chosen_folder+"$&"+random_variation+str_end);
I have the following code snippet to convert html to javascript, but I seem to be facing an issue with the output when bound to a textarea and I am not able to figure out what the issue could be.
var html_to_text = $('#source').val().replace(' ', ' ').replace(/<[^>]*>/g, '').replace(/(<br>)+/g, '<br>');
The output is correct when displaying on an alert, but, when the same is bound to a text area, there is a lot of white space on it. Could someone help me understand what could be the issue with the above snippet.
I have a working sample of the same at http://jsfiddle.net/technicaliti/uuxDx/
Add .replace(/\s{2,}/g, '\n\r') to the end.
.replace(/\r?\n|\r/g,"");
This one removes only multiple newlines (taken from this answer) so you still get a nice format
Demo fiddle
Just replace the line break with nothing.
html_to_text = html_to_text.replace(/\n/g, '');
I've got a little bit of javascript embedded in my html (using a .aspx file). I want to perform some sort of if statement which then determines whether or not some sort of chart is displayed. This chart is displayed using html, and I'm assuming the if statement should be written in javascript. However, I don't really know how to "run" this html code from within java. It is basically just drawing a table. Any suggestions? I've seen document.write, but I've only seen that being used with single lines.
You don't really "run" an HTML code. HTML is a markup language and it is mostly used to format and arrange elements that are displayed in the web browser.
The problem you are probably trying to solve is: Display or hide an element based on some condition. A JavaScript code like this is what you want.
if (condition) {
document.getElementById('chart').style.display = "none"
} else {
document.getElementById('chart').style.display = ""
}
Of course whatever element is responsible for displaying the chart should have an id="chart" attribute. e.g. <div id="chart"><!-- Chart related code goes here --></div>.
The JavaScript code I have given alters the display CSS property of this element to hide it or make it visible.
In case this is not what you want but you want to dynamically modify the HTML responsible for the chart, then you need to use the innerHTML property of the element.
Example:
if (condition) {
document.getElementById('chart').innerHTML = "<!-- HTML Code for the chart here -->"
} else {
document.getElementById('chart').innerHTML = ""
}
I'm assuming the if statement should be written in javascript
Unless you are testing something that you can only find out out in JS, then do it server side in your ASP.NET code.
I don't really know how to "run" this html code from within
This is covered by chapter 47 of Opera's WSC: Creating and modifying HTML. You may wish to read some of the earlier chapters first.
java
Java has about as much in common with JavaScript as Car does with Carpet. They are completely different programming languages.
Try writing the if statement in javascript and then rendering the html with the JQuery html() function. Just use a custom html id to locate where you want the html code to go.
<div id = "custom-tag"> </div>
<script>
if (true){
$('#custom-tag').html('YourHtmlString');
} else {
$('#custom-tag').html('DifferentHtmlString');
}
</script>
Read more about html() here: http://api.jquery.com/html/
YourHtmlString & DifferentHtmlString is where you should store your custom html in string format. It will then be rendered wherever you included "div id = 'custom-id'
Hope this helps!