I created a code through Codecademy. Whenever I wanted text to appear, I was told to use console.log However, when I actually run the code, using HTML (as a js file would not run), the text does not appear, as the console is not displayed.
The code was for one of those classic choose-your-adventure text-based games. After answering a prompt, text with the story line is supposed to appear as another prompt appears. The prompts run through, but the story line is not displayed. What could I change console.log to in order to make the text appear?
~EDIT~ Thank you, Vince.
I suppose some of you did not exactly understand what I was asking.
I shared my reason for my ignorance. I learned JavaScript through Codecademy. They did not teach you how to make text appear. All they said was you could use console.log to make text appear. It makes text appear in the console, but I wanted it to appear outside of the console.
I went back to my script and changed every console.log to document.writeln. My code now works.
And to whoever suggested that I would be afraid of JavaScript: I wrote a lengthy and complex code for a beginner. I did not post it on here as it is my intellectual property and I did not need to post it to ask my question. I had a misconception and I wanted to clear it up.
Though essentially considered bad practice, (but as a beginner you're more than welcome to use this) you can use document.writeln('Hello, World!'); to actually write text onto the page.
You can also, in your HTML, define a container with an id:
<div id="my-text-box">
</div>
and in your JavaScript,
window.onload = function(){
document.getElementById('my-text-box').innerHTML = "Hello, World!";
};
I'm not entirely sure what you want to achieve, but I guess you want to display text on your webpage. You can do this like this:
window.onload = function() {
var a = 'Text to be displayed'; //<<< The text you want to display
var b = document.createElement('div'); //<<< create a Element
b.innerHTML = a; // <<< append content to the element
document.getElementsByTagName('body')[0].appendChild(b); //<<< append the element to the pages body
}
Related
I have a textarea in my website contains PHP code.
I want to make the users able to Modify the code and then Run it.
So, I have made a textarea called modifyCode:
<textarea id="modifyCode"></textarea>
So far I have managed to run the PHP code which is written in the textarea.
BUT, I really like to apply code highlighter to my text box. With this regard, I have tried a couple of ways:
I have tried "highlight.js" --> https://highlightjs.org/
I have tried "codemirror" --> https://codemirror.net/
Not only I can't get my PHP code to be highlighted, but also it can't be running anymore.
I need to mention that the same method is working fine to highlight XML code, but it won't run too!
As far as I understood, when we apply these code highlighters, the textarea will not act like a textarea anymore. So, is there anyway that I can highlight my PHP code and then run it?
A way to encounter with this issue is to make an middle DIV called modifyCodeDiv:
<div id="modifyCodeDiv" contenteditable="true"></div>
modifyCodeDiv is getting the value of modifyCode textarea:
document.getElementById("modifyCodeDiv").innerHTML =
document.getElementById("modifyCode").value;
So, users can modify the code in the div modifyCodeDiv.
To execute the code, you need to send the value of modifyCodeDiv to modifyCode. As div does not have value attribute, you need to do:
var my_element = document.getElementById('modifyCodeDiv');
var my_str = my_element.innerText || my_element.textContent;
document.getElementById("modifyCode").value = my_str;
Furthermore, you can apply highlight.js to your div modifyCodeDiv.
So I am brand new to programming in both Javascript and just started working with QA testing. My goal right now is fairly simple. I want to make sure that all elements are loaded in the repeater before I make my selection from the list. I wanted to wait until the first and last element were present before proceeding with my test.
I know there are probably better ways to do this, feel free to throw suggestions at me. I've been looking around online and found code snippets detailing how to print to the console the values of elements within repeaters.
I figured I'd first just try to print out the first and last element to make sure I was getting them correctly. I did this:
var repeaterElements = element.all(by.repeater(repeaterObj));
var text = repeaterElements.first().toString();
console.log(text);
My goal being just to simply print the first element. However I got it to print [object Object] instead. Am I reasoning through this incorrectly? I thought that '.first( )' would give me the first element within the repeater!
-hopper
I'm not 100% sure what you are wanting, but I think this is it. This should go through a repeater, select all elements, get the text of those elements and console it out. If you are actually going to be doing anything other than consoling, remember to keep your promises!
element.all(by.repeater(repeaterObj)).each(function(obj){
obj.getText().then(function(text){
console.log(text)
});
});
I have this code I wrote
Currently it uses innerHTML to write to the page with a forloop. However, I noticed that instead of writing everything. It just writes the last element in the array.
I searched and saw that I have to use the DOM to get this done as innerHTML will ALWAYS destroy instead of replacing. So I wrote this
function print(message) {
var mydiv = document.getElementById("box");
mydiv.appendChild(document.createTextNode(message));
}
To go inside my code and replace the innerHTML line. However, this doesn't seem to work. Can anybody help me getting it running?
by "this doesn't seem to work" i mean that the code won't append to the child of box. so my text will not be inserted into the element with the 'box' ID.
What i want to happen is just like in my codepen where i used innerHTML but instead of each only the last element in the array showing up, i want them all to show up
edit:
okay updated the codepen. seems the code I posted on this page kinda works. but it doesn't seem to go in the right place. if you check the codepen and add some text and scroll down you can see it doesn't fit into place
Change the print function in this way:
function print(message) {
var html = document.getElementById("box").innerHTML;
document.getElementById("box").innerHTML = html + message;
}
http://codepen.io/anon/pen/bwBOdq
I'm completely new to Javascript and trying to learn some basics
I'm making a webpage that add's up totals etc and right from the start i'm having a problem.
I'm looking at videos on lynda.com and i've also searched the net.
it's something very simple i'm trying to do.
I have a variable set to 30 and I want to display that on my page.
var points = 30;
document.write(points);
I also had 30 in double and single quotes which didn't work.
My HTML is
<p id="points"></p>
What I want to happen is I want the variable to display on site. So in this case I want 30 to display on site.
it's not at the moment.
Any help would be great.
thanks.
The correct code is:
var points = 30;
document.getElementById('points').innerHTML = points;
Use innerHTML for change the HTML code and use innerText to change only the text.
Maybe you forgot to implement the script:
<script src="path/and/yourscriptname.js"></script>
<p id="points"></p>
An easier method to peek into variables at certain points is to use console.log().
For example, console.log(points); will output 30 so your browser console.
To view the browser console, Google how to view the console for the specific browser you're using. Here's how to view it on Chrome.
I have a webpage div with contentEditable=true. After the user modifies the content of the div, the system uses document.getElementById(id).innerHTML to get the content and send it to server. This is all working:
<div id='editBox'; contentEditable='true'></div>
<script>
document.getElementById('editBox').onkeydown=function(e){
clearTimeout ( backupTimeoutID );
backupTimeoutID = setTimeout(function(){sendDivContentToServer()},3000);
}
<script>
the reason I'm using the a div with contentEditable=true instead of text area is that I need to allow displaying and formatting of background-colored text in the div. If I'm unaware of any better way, please, let me know.
My problem is with the inconsistence with which line breaks are displayed. If the user presses return inside the div, it creates another div for the line break. So, when the function gets the innerHtml, it looks like this
first line of text<div>second line of text</div>
Sometimes, when pasting text from other sources in the edit box (from internet, word, etc), line breaks appear as <p>.
I want all line breaks to look like this:
first line of text<br>second line of text
I have tried changing the behavior of the <div> whenever the user presses return; I know the code is working, for if I try to insert a word instead of return it works. But, when I set the code to substitute return for <br> it acts erradically. This is the code I'm using for this:
<script>
document.getElementById('editBox').onkeydown=function(e){
clearTimeout ( backupTimeoutID );
backupTimeoutID = setTimeout(function(){sendDivContentToServer()},3000);
}
} else if ( pressedKeyCode==13 ) {
e.preventDefault();
document.execCommand("InsertHTML",false,"a"); // this works
document.execCommand("InsertHTML",false,"<br>"); // I don't see the effects I want with this
}
<script>
Converting the multiple line breaks – <div>, <p> and <br> – seem to be a hard task. Using <br> for line breaks seems less error prone.
I'm developing for a web viewer in FileMaker for use in Mac OSX. So, so far, I care more about Safari than any other browser.
Thanks, in advance, for the help.
Reining in contentEditable is not an easy task. Unfortunately it's not really standardized and every browser has its quirks.
I would suggest you have a look at the many well written HTML rich text editors that are around.
For example, CKEditor only creates sensible, valid HTML, it allows you to configure what happens, when the user presses return, it can remove or replace any unwanted HTML and you can disable any features that the user shouldn't use.