Javascript function to display text

javascript function return text to html

I found the following code snippet and am looking for some clarification on how it works, because it solves what I’m hoping to do. The variable ‘html’ is a string, which is returned form the function showCard, and is placed into the HTML code as a div. I’m able to replicate this however the string output is returned and starts with: «. » so the div isn’t created, the string is simply moved into my HTML because the quotes remain outside the div.

function Card(suit, val, name, symbol) < this.suit = suit; this.val = val; this.name = name; this.symbol = symbol; this.showCard =function showCard() < var html=""; switch(this.suit) < case "hearts": suit_text = "♥"; break; case "diamonds": suit_text = "♦"; break; case "spades": suit_text = "♠"; break; case "clubs": suit_text = "♣"; break; >html="
" + this.symbol + "
" + suit_text + "
"+this.symbol +"
"+this.symbol+"
"+suit_text+"
"; return html; > > 

switch is similar to a series of if s. Please be warned, suit_text is not being var d anywhere in the code you’ve shared here

It looks like it’s being put into the DOM for me: jsfiddle.net/bz72wkrj How are you actually inserting the elements?

var html=»»; just initialises the variable to the empty string. It could be rewritten to jsfiddle.net/6ja9sjL2/1 if you do not like the var html. The suit_test is now a global var the way it is used

How do you call this function? Make sure to properly create a Card instance with new Card(. ) , and to declare the variable suit_text .

3 Answers 3

If you use createTextNode , your HTML will be treated as regular text. Easiest way is to update the innerHTML of a node.

function Card(suit, val, name, symbol) < this.suit = suit; this.val = val; this.name = name; this.symbol = symbol; this.showCard =function showCard() < var html=""; switch(this.suit) < case "hearts": suit_text = "♥"; break; case "diamonds": suit_text = "♦"; break; case "spades": suit_text = "♠"; break; case "clubs": suit_text = "♣"; break; >html="
" + this.symbol + "
" + suit_text + "
"+this.symbol +"
"+this.symbol+"
"+suit_text+"
"; return html; > > var card = new Card('hearts', 1, 'Hearts', 'heart-symbol'); var container = document.createElement('div'); container.innerHTML = card.showCard(); // We could insert the container div, but we don't really need it. document.querySelector('div').appendChild(container.firstChild);

This is perfect, thanks. I’m new to JS and completely forgot about simply putting the html return from showCard as the innerHTML. Thanks

Here are a couple examples of how you might convert a HTML String to DOM

If you’re starting with you may need to modify one of the above methods.
If your HTML is invalid you may get an Error

After using one of the above methods, you can append what you want to a node of your choice with parent.appendChild(node_to_be_appended);

If you’re asking how to create a Node instead of a String, use the DOM methods, such as document.createElement

function makeNode(tag, attribs, text) < var e = document.createElement(tag), k; if (attribs) for (k in attribs) e.setAttribute(k, attribs[k]); if (text) e.textContent = text; return e; >makeNode('span'); // HTMLSpanElement ​ makeNode('span', ); // HTMLSpanElement ​ 

@JuanMendes it is a generic method to convert a String to DOM in a way that can be appended to the document easily

You could create the outer div using document.createElement and then populate the rest of the HTML using its innerHTML property.

function Card(suit, val, name, symbol) < this.suit = suit; this.val = val; this.name = name; this.symbol = symbol; this.showCard =function showCard() < var html=""; switch(this.suit) < case "hearts": suit_text = "♥"; break; case "diamonds": suit_text = "♦"; break; case "spades": suit_text = "♠"; break; case "clubs": suit_text = "♣"; break; >html="
" + this.symbol + "
" + suit_text + "
"+this.symbol +"
"+this.symbol+"
"+suit_text+"
"; var div = document.createElement('div'); div.classList.add('card'); div.classList.add(this.suit); div.innerHTML = html; return div; > > 

The returned div can then be passed directly to document.body.appendChild like so:

document.body.appendChild(new Card(. ).showCard()); 

Note that using innerHTML can, in some cases, lead to security issues if you’re not careful with the inputs. Make sure that the arguments you use to create cards are sanitized if coming from the user!

As an additional note, you might want to consider including the append operation in showCard or changing the name of showCard to something that is more descriptive of what it actually does (i.e. createCard )

Источник

how to display text in div dynamically

I have searched on the forum and saw posts about changing text dynamically upon click. But in my case I want to change the display dynamically when loading the page from beginning. I already have a function that figure out what I should display:

And my question is how to display the returned phone number in the div below to replace the 1.888.888.8888 part. Can anyone offer some insights? Thank you!

 
Order online or call 1.888.888.8888 
 

6 Answers 6

I would change the HTML to add another tag around the phone number and give that span tag an id attribute in order to access it easily (broke it up on separate lines to reduce scrolling):

Then after the page loads update the span with whatever value you want:

Thanks Talemyn! But I’m not so sure what you meant by «after the page loads». I want the number to display when the user first see the page, not after the page has loaded. Sorry if it’s a silly question. I’m really new to js.

Well, the page has to finish loading (and the DOM structure finish building) before the JS can act on it. However, this should be REALLY fast, to the point that it will seem to the user like it loaded with the number in it to begin with. The only way that this would likely be an issue would be if something slowed the page load down so much that you would see this section before the rest of the page loaded. If that’s a concern, you could hide the add-info section (or even the entire ) by default and then unhide it immediately after updating the number.

Источник

Display text file in JavaScript

What code should I use to display the contents of a plain-text .txt file in JavaScript? I want the text to scroll on screen in the active window. Thanks in advance!

2 Answers 2

To get the text to display with new lines etc, use a or a , i.e.

Next is, where is the plain text file?

From a Server

function populatePre(url) < var xhr = new XMLHttpRequest(); xhr.onload = function () < document.getElementById('contents').textContent = this.responseText; >; xhr.open('GET', url); xhr.send(); > populatePre('path/to/file.txt'); 

From the local machine

Make the user select the file using an

Then when the user selects a file, use FileReader to populate the

document .getElementById('filechoice') .addEventListener( 'change', function () < var fr = new FileReader(); fr.onload = function () < document.getElementById('contents').textContent = this.result; >; fr.readAsText(this.files[0]); > ); 

We can use below code for this purpose:

I don’t think that’s what it was asked in the question. It was said “display the contents of a plain-text .txt file in JavaScript”.

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.24.43543

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

Как вывести текст в JavaScript

На этом уроке мы рассмотрим, как вывести текст в JavaScript на экран, с двумя разными целями: заменить на другой и добавить к существующему.

Создадим простую HTML структуру, подходящую для обоих вариантов. При клике по кнопке, текст в параграфе должен замениться на другой. На кнопку мы повесили событие onclick с названием функции text_out(). Дальше нам предстоит эту функцию запрограммировать в JavaScript.

Заменить текст в JavaScript

Пишем название функции, совпадающее с onclick событием на кнопке, внутри фигурных скобочках, будем писать код функции.

Для получения параграфа для работы:

Присвоим переменной p следующий объект. Мы получили и положили в переменную p, весь параграф с идентификатором text_change.

Для того, чтобы вывести что-нибудь (числа, строки) внутри любого парного тега, надо использовать конструкцию innerHTML. Получим целый параграф и вместо «Заменить текст», выведем внутри p новую запись:

p.innerHTML = ‘Текст заменили’;

После клика по кнопке, замена произошла успешно.

Нам интересно, а что произойдет с исходным кодом, после манипуляций с заменой? Заглянем в инспектор кода для разработчика и увидим, что в HTML коде, тоже произошли изменения.

Что будет, если кавычки оставить пустыми?

Тогда параграф очистится, текущая запись удалится, а новая не вставится.

Добавить текст в JavaScript

Как добавить новый текст к уже существующему, не удаляя текущий?

p.innerHTML += ‘ на сайте‘;

Мы видим новый оператор присваивания +=, который объединяет две строки. Это выражение можно записать и аналогичным образом.

Эти две записи равнозначны.

p.innerHTML = p.innerHTML + ‘на сайте’;

Берем, что имеется, прибавляем что-нибудь новое и записываем заново.

Вы наверное заметили, что новый текст, заключен в кавычки вместе с тегами , а браузер не просто его добавил, но и обработал (добавил курсивное начертание). В конструкции innerHTML, теги обрабатываются браузером.

p.innerHTML += ‘ на сайте‘;

Теги выводятся, но не обрабатываются.

p.innerText += ‘ на сайте‘;

Все действия, которые мы производили до этого, приводят к тому, что запись выводится между парными тегами. Однако было бы удобно иметь возможность более гибко выводить дополнительную информацию по отношению к элементу. Такой способ есть и выглядит следующим образом.

Это свойство позволяет выводить на экран информацию в разные места по отношению к текущему элементу. Оно имеет два параметра:

Свойство insertAdjacentHTML, позволяет выводить любое содержание в четырех позициях, как дополнение к текущему содержанию.

• beforeBegin — перед открывающим тегом
• afterBegin — после открывающего тега
• beforeEnd – перед закрывающим тегом
• afterEnd – после закрывающим тегом

Осталось рассмотреть ещё одно свойство – outerHTML. В чем между ними разница? innerHTML, заменяет содержимое тега, но сам тег оставляет прежним. outerHTML заменяет содержимое вместе с тегом.

Присвоим параграфу «Замена» всего вместе с div. Обратите внимание, что парный тег div снаружи заключен в одинарные кавычки, но внутри тега используются двойные кавычки. Это делается для того, чтобы не происходило разрыва строки. Кавычки снаружи и внутри должны быть разные.

После нажатия на кнопку, текущие теги параграфа вместе с текстом, заменяются на div.

В инспекторе кода, мы увидим уже новый код, на месте старого.

Создано 02.01.2019 10:36:17

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Источник

JavaScript Output

To access an HTML element, JavaScript can use the document.getElementById(id) method.

The id attribute defines the HTML element. The innerHTML property defines the HTML content:

Example

My First Web Page

My First Paragraph

document.getElementById(«demo»).innerHTML = 5 + 6;

Changing the innerHTML property of an HTML element is a common way to display data in HTML.

Using document.write()

For testing purposes, it is convenient to use document.write() :

Example

My First Web Page

My first paragraph.

Using document.write() after an HTML document is loaded, will delete all existing HTML:

Example

My First Web Page

My first paragraph.

The document.write() method should only be used for testing.

Using window.alert()

You can use an alert box to display data:

Example

My First Web Page

My first paragraph.

You can skip the window keyword.

In JavaScript, the window object is the global scope object. This means that variables, properties, and methods by default belong to the window object. This also means that specifying the window keyword is optional:

Example

My First Web Page

My first paragraph.

Using console.log()

For debugging purposes, you can call the console.log() method in the browser to display data.

You will learn more about debugging in a later chapter.

Example

JavaScript Print

JavaScript does not have any print object or print methods.

You cannot access output devices from JavaScript.

The only exception is that you can call the window.print() method in the browser to print the content of the current window.

Example

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник