Есть ли способ отобразить переменную из JavaScript в html

Я хочу отобразить переменную из расширения с именем node temp mail это просто временный генератор электронной почты я установил его с помощью npm скажите мне, если вам нужна дополнительная информация, я новичок в веб-разработке

я хочу, чтобы переменная body отображалась в html или на самом сайте

Вот код:

var TempMail = require('node-temp-mail');

function makeid(length) {
    var result           = '';
    var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    var charactersLength = characters.length;
    for ( var i = 0; i < length; i++ ) {
        result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    return result;
}

var address = new TempMail(makeid(5),true);

address.fetchEmails(function(err,body){
    console.info(body);
});

address.getAddress()

<!DOCTYPE html>
<html lang = "en">

<head>
    <meta charset = "UTF-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <link rel = "stylesheet" href = "style.css">
    <script src = "javasquript.js"></script>
    <title>Debit Card Design</title>
</head>

<body>
    <div class = "card">
        <h4 class = "bank">lightning <span>BANK</span></h4>
        <div class = "number">
            <h6>4512</h6>
            <h6>8963</h6>
            <h6>7845</h6>
            <h6>3542</h6>
        </div>
        <img src = "img/lightning.png" alt = "" class = "lightning">
        <img src = "img/wave.png" alt = "" class = "wave">
        <div class = "ex_date">
            <span>VALID<br>UPTO</span>
            <h3>02 <span>/</span> 29</h3>
        </div>
        <div class = "cvv">
            <span>CVC</span>
            <h1>563</h1>
        </div>
        <img src = "img/visa.png" alt = "" class = "visa">
    </div>
    <script type = "module" src = "javasquript.js"></script>
</body>
</html>

Это body или address.getAddress() или оба вы хотите отобразить в html? И как выглядят данные. Где в html вы хотите, чтобы это отображалось. Вы пытались решить эту проблему, пожалуйста, покажите, что вы пытались.

— 29.10.2022 10:36

javascript html css

29.10.2022 10:24

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете создать пустой div в html Вот так:

<div id = "address"></div>

а затем в js вы просто устанавливаете содержимое div следующим образом:

document.getElementById('address').innerHTML = body;

Обратите внимание, что это всегда переопределяет все, что содержится в div.

Кроме того, по умолчанию функция require не является допустимой. Вам нужно использовать require.js, чтобы он работал, поэтому добавьте это в html:

<script src = "https://requirejs.org/docs/release/2.3.6/minified/require.js"></script>

Вот пример со всеми вещами, которые я упомянул, реализованными:

var TempMail = require('node-temp-mail');

function makeid(length) {
    var result           = '';
    var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    var charactersLength = characters.length;
    for ( var i = 0; i < length; i++ ) {
        result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    return result;
}

var address = new TempMail(makeid(5),true);

address.fetchEmails(function(err,body){
    document.getElementById('address').innerHTML = body;
});

address.getAddress();

<script src = "https://requirejs.org/docs/release/2.3.6/minified/require.js"></script>

<div class = "card">
    <h4 class = "bank">lightning <span>BANK</span></h4>
    <div class = "number">
        <h6>4512</h6>
        <h6>8963</h6>
        <h6>7845</h6>
        <h6>3542</h6>
    </div>
    <img src = "img/lightning.png" alt = "" class = "lightning">
    <img src = "img/wave.png" alt = "" class = "wave">
    <div class = "ex_date">
        <span>VALID<br>UPTO</span>
        <h3>02 <span>/</span> 29</h3>
    </div>
    <div class = "cvv">
        <span>CVC</span>
        <h1>563</h1>
    </div>
    <img src = "img/visa.png" alt = "" class = "visa">
    <div id = "address"></div>
</div>

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

— 29.10.2022 11:03

Вы хотите отобразить adress.getAdress() верно? Тогда просто замените yourVariableName на adress.getAdress()

— 29.10.2022 13:20

есть ошибка, говорящая о том, что uncaught ReferenceError: требование не определено, и этот crbug/1173575, файлы модулей, отличных от JS, устарели.

— 29.10.2022 13:32

Требование в строке 1 не имеет ничего общего с этим решением. Эта ошибка новая?

— 29.10.2022 14:08

да, это что-то новое, и спасибо за ответ

— 29.10.2022 14:42

о, это выскочило сейчас Uncaught ReferenceError ReferenceError: документ не определен

— 29.10.2022 15:31

@HiruyMetsihafe я отредактировал решение, чтобы исправить ошибку запроса. теперь все должно работать!

— 30.10.2022 17:54

29.10.2022 10:36

Использование innerHTML имеет недостатки . Возможно, лучше использовать insertAdjacentElementHTML. Демо:

document.addEventListener(`click`, handle);

function handle(evt) {
  if (evt.target.id === `demo`) {
    document.querySelector(`#insert`)
      .insertAdjacentHTML(`beforeend`, `<div>inserted: ${generateUUID()}</div>`);
  }
}

function generateUUID() {
  let [ d, d2, template, replaceLambda ] = [ 
      +new Date(),
      (window.performance && performance.now()*1000) || 0, 
      `00000000-0000-4000-1000-000000000000`,
      chr => {
        let r = Math.random() * 16;
        let rr = d > 0 ? (d + r) % 16 | 0 : (d2 + r) % 16 | 0;
        d > 0 && ( d = ~~(d / 16)) ||  ( d2 = ~~(d2 / 16) );
        return (!+chr ? rr : (rr & 0x3 | 0x8)).toString(16);
      }, ];
  
  return template.replace( /[01]/g, replaceLambda );
}

<button id = "demo">Insert UID</button>
<div id = "insert"></div>

30.10.2022 16:19

Другие вопросы по теме

Отображение всех карточек пользователей на экране js

Не удается получить доступ к входному значению HTML в JavaScript

Создайте динамический div с помощью JavaScript

Панель навигации не меняет цвет при прокрутке, хотя другие эффекты прокрутки работают

Функционал поиска в 11ти

Флажок изменить CSS, чтобы он выглядел как кнопка

Использовать переменную javascript в html-скрипте

Я использовал международные телефонные номера (intlTelInput) в своем приложении django, но кажется, что форма не сохраняет номер

Как перебирать элементы в селене с помощью Python?

Неожиданный токен '<', "<!DOCTYPE"... недействителен JSON express ejs

Есть ли способ отобразить переменную из JavaScript в html

Ответы 2

Другие вопросы по теме

Похожие вопросы