Category: javascript

Category Added in a WPeMatico Campaign

Django fails to load javascript file but has no trouble server a css file in the same directory

I receive a Failed to load resource: the server responded with a status of 404 (Not Found) for the javascript file. The page loads fine but the javascript resource isn’t obtained despite being in the same static folder as the css file which django has no trouble collecting.

settings.py

STATIC_URL = '/static/'
 
BASE_DIR = os.path.dirname(os.path.dirname(__file__))
#STATIC_ROOT = os.path.abspath(os.path.join(os.path.dirname(BASE_DIR), 'static'))
STATIC_ROOT = 'static/'
STATIC_DIR = os.path.join(BASE_DIR, 'static')
STATICFILES_DIR=[STATIC_DIR]

html


{% load static %}
asdfs
<link rel="stylesheet" type="text/css" href="{% static 'polls/styles.css' %}">
<body id='app'>
    <p>i'm testing again</p>
      <li><a href="www.google.com">google</a></li>
  <script  type="text/javascript" src="{% static 'polls/reactfile.js'
%}"></script>
</body>
</html>

JavaScript Chrome Konsolu csv Hata Veri boş

with this code, it writes console texts, but it does not save as csv, it was full of downloaded data

chat_titles = [];
phone_numbers = [];
chats_container = getElementsByXPath('//*[@aria-label="Chat list"][@role="grid"]')[0];
do {
    beginning_length = chat_titles.length;
    all_chats = getElementsByXPath('//*[@data-testid="cell-frame-container"]', chats_container);
    lowest_loc = -1;
    lowest_loc_i = -1;
    for (i=0; i<all_chats.length; i++) {
        archive_check = getElementsByXPath('div[2]/div[1]/div[1]', all_chats[i])[0].innerText;
        if (archive_check == 'Archived') {
            console.log(i + ' - Archived');
        } else {
            chat_title = getElementsByXPath('div[2]/div[1]/div[1]/span', all_chats[i])[0].innerText;
            console.log(i + ' - ' + chat_title);
            back_buttons = getElementsByXPath('//*[@data-testid="back"]');
            if (back_buttons.length >= 2) {
                back_buttons[0].click();
                await sleep(1000);
            } else {
                if (lowest_loc < all_chats[i].getBoundingClientRect().top) {
                    lowest_loc = all_chats[i].getBoundingClientRect().top;
                    lowest_loc_i = i;
                }
                if (chat_titles.indexOf(chat_title) == -1) {
                    all_chats[i].click();
                    simulateMouseEvents(all_chats[i], 'mousedown');
                    await sleep(2000);
                    chat_window = document.getElementById('main');
                    group_members_container = getElementsByXPath('//*[contains(text(), ", You")]', chat_window)
                    if (group_members_container.length > 0) {
                        group_members = group_members_container[0].title.split(', ');
                        for (group_member_i=0; group_member_i<group_members.length; group_member_i++) {
                            if (!group_members[group_member_i].match(/[a-z]/i)) {
                                phone_number = group_members[group_member_i].replace(/[^d]/g, '');
                                if (phone_numbers.indexOf(phone_number) == -1) {
                                    phone_numbers.push(phone_number);
                                }
                            }
                        }
                    }
                    chat_titles.push(chat_title);
                }
            }
        }
    }
    all_chats[lowest_loc_i].scrollIntoView();
    ending_length = chat_titles.length;
    console.log(ending_length + ' chats scanned.');
    await sleep(500);
} while (beginning_length != ending_length)

download_data(phone_numbers);
console.log('Done');


function getElementsByXPath(xpath, parent) {
    let results = [];
    let query = document.evaluate(xpath, parent || document,
        null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
    for (let i = 0, length = query.snapshotLength; i < length; ++i) {
        results.push(query.snapshotItem(i));
    }
    return results;
}

function simulateMouseEvents(element, eventName) {
    var mouseEvent= document.createEvent ('MouseEvents');
    mouseEvent.initEvent (eventName, true, true);
    element.dispatchEvent (mouseEvent);
}

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

function download_data(data) {
    let csvContent = "data:text/csv;charset=utf-8,";
    data.forEach(function(rowArray) {
        let row = '"' + rowArray + '"';
        csvContent += row + "rn";
    });
    encodedUri = encodeURI(csvContent);
    link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", "phone_numbers.csv");
    document.body.appendChild(link);
    link.click();
}

I Paste and Run F12 Chrome Console, But It Outputs Console.log and Does Not Save Data And Csvye

It extracts the numbers, but when the process is finished, it does not save as .csv. Help me, I tried a lot, I could not fix it.

Using eslint with javascript- Unable to resolve path to module

I was having this problem!

enter image description here

The reference exists and it works, the problem is that eslint cannot find it. I fix it as follows!

.eslintrc.json

    {
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": ["plugin:import/recommended", "plugin:react/recommended", "standard"],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
    "semi": [2, "always"],
    "comma-dangle": [
      "error",
      {
        "arrays": "only-multiline",
        "objects": "only-multiline",
        "imports": "only-multiline",
        "exports": "only-multiline",
        "functions": "only-multiline"
      }
    ],
    "space-before-function-paren": 0,
    "spaced-comment": [
      "error",
      "never",
      {
        "line": {
          "markers": ["/"],
          "exceptions": ["-", "+"]
        },
        "block": {
          "markers": ["!", "-", "+"],
          "exceptions": ["*"],
          "balanced": true
        }
      }
    ]
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx"],
        "moduleDirectory": ["node_modules", "src/"]
      }
    }
  }
}

I assume eslint installed and has problems integrating express node and react js projects

You can use the automatic configuration of eslint follow the steps and when it is installed configure your .eslint file add the description of setting

"settings": {
"import/resolver": {
  "node": {
    "extensions": [".js", ".jsx"],
    "moduleDirectory": ["node_modules", "src/"]
  }
}

}

https://eslint.org/docs/user-guide/getting-started

D3.js Adding hyperlinks to svg text not working still drawing extra unlinked text bug

Hi I am trying to make plain text labels in D3 into hyperlinks. I was able to add the links using append(‘a’) and xlink:href however there is still the extra plain text being drawn too and I cannot find a solution to remove the extra text that are not links

Here is my code for drawing axis labels:

              svg.append('g')
                .attr('transform', tickTransform)
                .call(d3.axisRight(y))
                .selectAll('.tick text')
                .attr('class', 'axis-labels')
                .append('a')
                .attr("xlink:href", "http://en.wikipedia.org/wiki/")
                .attr('class', 'axis-links')
                .attr('tabindex', 0)
                .attr('aria-describedby', (d) => `label text-${d}`)
                .style("font-family", 'Source Sans Pro')
                .text((d) => textWrap(d));

The resulting HTML looks like this:

<text fill="#000" x="9" dy="0.32em" class="axis-labels">
Label link -problem line
<a xlink:href="http://en.wikipedia.org/wiki/" class="axis-links" tabindex="0" aria-describedby="label text-Label link" style="fill: rgb(85, 85, 85); font-family: &quot;Source Sans Pro&quot;;">Label link</a>
</text>

I have indicated the problem line which is the extra text being added since the already creates the label text i do not want that extra problem line.image of UI showing resulting HTML

How to add multiple TinyMCE Editor with reactive form validation on 1 page (Angular)

Need help on adding custom validation on the TinyMCE Editor.

I want to add custom maxLength validation on the tinyMCE Editor (maximum 10 charactors).
Its working when i do it with 1 editor but doesnt work when i add multiple editors.

Note: Please reload the codesandbox link if get any error.

codesandbox link: https://codesandbox.io/s/tinymce-multiple-editor-validations-t8ud5?file=/src/form/form.component.html

how to hide divs with a radio button

I wish I could show or hide a div following the selection of a radio button
I have 4 radio buttons
including 3 which must display the same div
and 1 another div
the best way i found is this one
But is there a way to avoid having 3 divs with the same content?

 2 Cars
<input type="radio" name="choix_livraison" class="choix_livraison" data-nom="POSTE-ENVELLOPPE-belgique"  value ="1" checked="checked"> 

        3 Cars<input type="radio" name="choix_livraison" class="choix_livraison" data-nom="mondial relay-belgiqueE" value="2" > 
    
         3 Cars<input type="radio" name="choix_livraison" class="choix_livraison" data-nom="mondial relay-FRANCE" value="3" > 

 3 Cars<input type="radio" name="choix_livraison" class="choix_livraison" data-nom="mondial relay-autre" value="4" > 

    <div id="1" class="desc">
       j'ai sélectionne 2
    </div>
    <div id="2" class="desc">
        j'ai sélectionne 3
    </div>
  <div id="3" class="desc">
        j'ai sélectionne 3
    </div>
    <div id="4" class="desc">
        j'ai sélectionne 3
    </div>

 <script language="javascript">
   
$(document).ready(function() {
    $("div.desc").hide();
    $("input[name$='choix_livraison']").click(function() {
        var test = $(this).val();
        $("div.desc").hide();
        $("#" + test).show();
    });
});
   
   </script>

jQuery import causing my webpage to become unresponsive

I have the following html page:

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <title>Message wall</title>
    <style>
        #messages {
            overflow-y: scroll;
            border: black;
            height: 20em;
            width: max-content;
        }

        #back {
            position: fixed;
            top: 0;
            right: 0;
            margin-right: 5px;
            background-color: gainsboro;
        }

        #message-sender {
            position: fixed;
            bottom: 0;
        }

        form {
            margin-bottom: 5px;
        }

        #message-input {
            padding-right: 10em;
        }
    </style>
</head>
<body>
    <div id="messages"></div>
    <div id="back">
        <h3 style="margin: 0;"><a href='http://localhost'>Main Page</a></h3>
    </div>
    <div id="message-sender">
        <form>
            <h3>Input message: </h3>
            <input id="message-input" type="text">
            <input id="message-send-btn" type="button" value="Send">
        </form>
    </div>
    <script>
        function usernameExists() {
            user = localStorage.getItem('user')
            return !(user == null || user == "null" || user == '')
        }

        function promptUsername() {
            let input = prompt('Please enter a username: ')

            if (input.length <= 20 && !(input.includes(' '))) {
                localStorage.setItem('user', input)
            } else if (input.length > 20) {
                alert('Username must be less than 21 characters!')
            } else /* if (input.includes(' ')) */ {
                alert('Spaces are not allowed in usernames!')
            }
        }

        if (!usernameExists()) {
            promptUsername()
        } else {
            console.log(localStorage.getItem('user'))
        }

        function updateMsgs() {
            $.ajax({
                url: "http://localhost/testing/getmsgs",
                success: function (response) {
                    document.getElementById('messages').innerHTML = response
                }
            })
        }

        updateMsgs()

        document.getElementById('message-send-btn').addEventListener('click', () => {
            while (!usernameExists()) {
                promptUsername()
            }

            let msg = document.getElementById('message-input').value

            if (msg == null) {
                return
            } else {
                $.ajax({
                    url: "http://localhost/testing/sendmsg?msg=" + msg + "&user=" + localStorage.getItem('user'),
                    success: function(response) {
                        document.getElementById('message-input').value = ''
                        updateMsgs()
                    }
                })
            }
        })

        while (true) {
            updateMsgs()
        }
    </script>
</body>
</html>

I tried loading this page using Django, it was unresponsive when my 2 other pages were. Same when using the file path to load it. I quickly realized that jQuery was the problem, for when I changed:

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

to:

<!-- <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> -->

The webpage became responsive, but without jQuery, it became non-functional.

expressjs – mongoDb return nested subArray

im trying to create a seprate route in my api for a subArray from a nested array. using expressJs.

categories array:

const Categories = [
{
    _id: 's654fs54s6d4f'
    title: 'category 1',
    SubCats: [
        {
            _id: 'jhgfsf68746'
            name: 'subcat 1',
            image: '/assets/images/vr-box-6203301_1920.jpg',
        },
        {
            _id: 'vb40n5b4vn'
            name: 'subcat 2',
            image: '/assets/images/galaxy-s20_highlights_kv_00.jpg',
        },
    ]
},
]

categoryModel:

import mongoose from 'mongoose'

const Catschema = mongoose.Schema({
    name: {
        type: String,
        required: true,
    },
    image: {
        type: String,
        required: true,
    },
})

const CategorySchema = mongoose.Schema(
    {
        title: {
            type: String,
            required: true,
        },
        SubCats: [Catschema]
    },
    {
        timestamps: true,
    }
)

const Category = mongoose.model('Category', CategorySchema)

export default Category

categoryController:

this would return the whole array

const getCategories = asyncHandler(async (req, res) => {
   const categories = await Category.find({})
   res.json(categories)
})

i want to return ‘SubCats’ array.

tried this but getting “SubCats is not defined”.

const getSubCategories = asyncHandler(async (req, res) => {
   const subcategories = await Category.find({SubCats})
   res.json(subcategories)
})

ReactDOM.createPortal() renders empty element when called in a function

I have a simple React.js app that tries to render content in a Portal on a callback, does someone have any ideas why it isn’t rendering anything?

Runnable CodeSandbox

import React from 'react'
import ReactDOM from 'react-dom'
import './App.css';

function App() {
  const showElement = React.useCallback(() => {
    const element = document.createElement('div');
    document.querySelector('body').appendChild(element)
    ReactDOM.createPortal(() => <div>TEST</div>, element)
  }, [])
  
  return (
    <div className="App">
      <button onClick={showElement}>Click to Render Portal</button>
    </div>
  );
}

export default App;

three java scripts, one overwriting one

I have two “nav” bars. The top nav scrolls in slow from the top-like its been trigged by the hiding navscript. The bottom nav acts as it should, displays on page open and disappears when page scrolls up then reappears when page scrolls down. Most time the page loads correctly and displays the random image background with the nav bar at top but the top nav always slides in after page laod. I had to put a bookmark to make the page load and show the random image background, #top. Otherwise the page would load at the h1 marker and hide the random image background which is in a fixed position. After numerous nav clicking back and forth the page loads to the top of the container and hides the random image background. Every time the page loads I can briefly see the h1 where the nav bar should be, its bright orange so I see it flash.

 <h2 id="top"></h2>
 <nav id="navbar">
    <ul>
        <li><b><a href="indexWEATHER.html">Weather</a></b></li>
        <li><b><a href="indexRace.html">Race</a></b></li>
        <li><b><a href="index.html"><img src="img/Burgee_WSC.png" width="30" height="10"></a> 
 </b></li>
        <li><b><a href="indexTour.html">Tour</a></b></li>
        <li><b><a href="indexMembers.html#top" class='active-page'>Club</a></b></li>
    </ul>

 </nav>

<nav id="secondLineNav">
    <ul>
        <li><b><a href="*.html">Sign Up</a></b></li>
        <li><b><a href="*.html">Zoom</a></b></li>
        <li><b><a href="*.html">Current Windword</a></b></li>
        <li><b><a href="*.html">Archives</a></b></li>
        <li><b><a href="indexPhotos.html">Photos</a></b></li>
        <li><b><a href="*.html">Winwords</a></b></li>
    </ul>
  </nav>

   <div class="container">

<h1>Updates, calendar and site map</h1>
   </div>


  <script >
    var random_images_array = ["1.jpg", "2.jpg","3.jpg","4.jpg","5.jpg"];
    
    function getRandomImage(imgAr, path) {
        path = path || 'random/'; // default path here
        var num = Math.floor( Math.random() * imgAr.length );
        var img = imgAr[ num ];
        var imgStr = '<img src="' + path + img + '" alt = "Random Image of Club">';
        document.write(imgStr); document.close();
    }
    </script>

   <div class="background">
          
    <div class="randomimages">
        <!--<img src="" alt="">-->
            <script type="text/javascript">getRandomImage(random_images_array);</script>
    </div>
    </div><!--background-->
    </script>

    <script type="text/javascript">  
    var lastScrollTop = 0;
    navbar = document.getElementById("navbar");
    window.addEventListener("scroll", function(){
    var scrollTop = window.pageYOffest || document  
        .documentElement.scrollTop;
    if(scrollTop > lastScrollTop){
        navbar.style.top="-90px";
    } else {
        navbar.style.top="0";
    }
    lastScrollTop = scrollTop;
    })
    </script>

    <script type="text/javascript">  
    var lastScrollTopb = 81;
    secondLineNav = document.getElementById("secondLineNav");
    window.addEventListener("scroll", function(){
    var scrollTopb = window.pageYOffest || document  
        .documentElement.scrollTop;
    if(scrollTopb > lastScrollTopb){
      secondLineNav.style.top="-90px";
    } else {
      secondLineNav.style.top="81px";
    }
    lastScrollTopb = scrollTopb;
   })
   </script>

    nav{
      width: 100%;
      height: 80px;
      background-color: rgba(0, 0, 0, 0.5);
      line-height: 80px;
      z-index: 999;
      position: fixed;
      transition: .5s;    
      white-space:nowrap;

     }

    nav ul{
   text-align: center;
    font-size: 20px;
    }

   nav ul li{
    list-style: none;
    display: inline-block;  /*take this out for vertical list*/
   /*transition: 0.8S all;*/
   vertical-align: top;
   justify-content: space-between;


   /*border-left: 1px solid #fff;
   border-right: 1px solid #ccc;
   width: 16.6667%; /* fallback for non-calc() browsers 
   width: calc(100% / 6);*/
   box-sizing: border-box;
   }


  nav ul li:hover{
 /*background-color: #f39c1a4b;*/
  border-radius: 10px;
  transform: scale(1.2,1.2);


  }

 nav ul li a{
 text-decoration: none;
 font-family: 'Lexend Mega', sans-serif;
 font-size: 100%;
 letter-spacing: .2rem;
 color: #dddcdc;
 padding: 30px;
 text-align: center;
 text-transform: uppercase;
  }
 nav .active-page{

 background-color: rgba(191, 191, 191, 0.336);
 }


   .background{
    background:rgb(91 111 155 / 48%);
    height: 90vh;
    z-index: auto;
    width: auto;
  }

  .randomimages img{
  
  position: fixed;
  top:400px;
  right: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
  transform: translateX(-50%) translateY(-50%);
  }

How to stop setInterval with javasript?

I want to start from 0. Until it reaches the numbers 709 and 54, Stop it.

HTML

<span class="card-title h5 counter"> 709 + </span>
<span class="card-title h5 counter"> 54+ </span>

script.js

let intervals = [];
let counter  = [];
let elements = document.getElementsByClassName('counter');
Array.from(elements).forEach((element, index) => {
    counter[index] = 0;
    intervals[index] = setInterval(()=> {
            counter[index]++;
            element.innerText=counter;
        }
        , 50);
})

But this code goes on indefinitely and does not end.

SVG background image (in CSS with URL link) renders in local host, but doesn’t render in production (heroku)

@import url("https://fonts.googleapis.com/css2?family=Arvo:wght@400;700&family=Comfortaa:wght@300;400;500;600;700&family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");

body {
  margin: 0;
  font-family: "Arvo", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='35.584' height='30.585' patternTransform='scale(2) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0,0%,100%,1)'/><path d='M36.908 9.243c-5.014 0-7.266 3.575-7.266 7.117 0 3.376 2.45 5.726 5.959 5.726 1.307 0 2.45-.463 3.244-1.307.744-.811 1.125-1.903 1.042-3.095-.066-.811-.546-1.655-1.274-2.185-.596-.447-1.639-.894-3.162-.546-.48.1-.778.58-.662 1.06.1.48.58.777 1.06.661.695-.149 1.274-.066 1.705.249.364.265.546.645.562.893.05.679-.165 1.308-.579 1.755-.446.48-1.125.744-1.936.744-2.55 0-4.188-1.538-4.188-3.938 0-2.466 1.44-5.347 5.495-5.347 2.897 0 6.008 1.888 6.388 6.058.166 1.804.067 5.147-2.598 7.034a.868.868 0 00-.142.122c-1.311.783-2.87 1.301-4.972 1.301-4.088 0-6.123-1.952-8.275-4.021-2.317-2.218-4.7-4.518-9.517-4.518-4.094 0-6.439 1.676-8.479 3.545.227-1.102.289-2.307.17-3.596-.496-5.263-4.567-7.662-8.159-7.662-5.015 0-7.265 3.574-7.265 7.116 0 3.377 2.45 5.727 5.958 5.727 1.307 0 2.449-.463 3.243-1.308.745-.81 1.126-1.903 1.043-3.095-.066-.81-.546-1.654-1.274-2.184-.596-.447-1.639-.894-3.161-.546-.48.1-.778.58-.662 1.06.099.48.579.777 1.059.66.695-.148 1.275-.065 1.705.25.364.264.546.645.563.893.05.679-.166 1.307-.58 1.754-.447.48-1.125.745-1.936.745-2.549 0-4.188-1.539-4.188-3.939 0-2.466 1.44-5.345 5.495-5.345 2.897 0 6.008 1.87 6.389 6.057.163 1.781.064 5.06-2.504 6.96-1.36.864-2.978 1.447-5.209 1.447-4.088 0-6.124-1.952-8.275-4.021-2.317-2.218-4.7-4.518-9.516-4.518v1.787c4.088 0 6.123 1.953 8.275 4.022 2.317 2.218 4.7 4.518 9.516 4.518 4.8 0 7.2-2.3 9.517-4.518 2.151-2.069 4.187-4.022 8.275-4.022s6.124 1.953 8.275 4.022c2.318 2.218 4.701 4.518 9.517 4.518 4.8 0 7.2-2.3 9.516-4.518 2.152-2.069 4.188-4.022 8.276-4.022s6.123 1.953 8.275 4.022c2.317 2.218 4.7 4.518 9.517 4.518v-1.788c-4.088 0-6.124-1.952-8.275-4.021-2.318-2.218-4.701-4.518-9.517-4.518-4.103 0-6.45 1.683-8.492 3.556.237-1.118.304-2.343.184-3.656-.497-5.263-4.568-7.663-8.16-7.663z'  stroke-width='1' stroke='none' fill='hsla(34, 100%, 95%, 1)'/><path d='M23.42 41.086a.896.896 0 01-.729-.38.883.883 0 01.215-1.242c2.665-1.887 2.764-5.23 2.599-7.034-.38-4.187-3.492-6.058-6.389-6.058-4.055 0-5.495 2.88-5.495 5.346 0 2.4 1.639 3.94 4.188 3.94.81 0 1.49-.265 1.936-.745.414-.447.63-1.076.58-1.755-.017-.248-.2-.629-.547-.893-.43-.315-1.026-.398-1.704-.249a.868.868 0 01-1.06-.662.868.868 0 01.662-1.059c1.523-.348 2.566.1 3.161.546.729.53 1.209 1.374 1.275 2.185.083 1.191-.298 2.284-1.043 3.095-.794.844-1.936 1.307-3.244 1.307-3.508 0-5.958-2.35-5.958-5.726 0-3.542 2.25-7.117 7.266-7.117 3.591 0 7.663 2.4 8.16 7.663.347 3.79-.828 6.868-3.344 8.656a.824.824 0 01-.53.182zm0-30.585a.896.896 0 01-.729-.38.883.883 0 01.215-1.242c2.665-1.887 2.764-5.23 2.599-7.034-.381-4.187-3.493-6.058-6.389-6.058-4.055 0-5.495 2.88-5.495 5.346 0 2.4 1.639 3.94 4.188 3.94.81 0 1.49-.266 1.936-.746.414-.446.629-1.075.58-1.754-.017-.248-.2-.629-.547-.894-.43-.314-1.026-.397-1.705-.248A.868.868 0 0117.014.77a.868.868 0 01.662-1.06c1.523-.347 2.566.1 3.161.547.729.53 1.209 1.374 1.275 2.185.083 1.191-.298 2.284-1.043 3.095-.794.844-1.936 1.307-3.244 1.307-3.508 0-5.958-2.35-5.958-5.726 0-3.542 2.25-7.117 7.266-7.117 3.591 0 7.663 2.4 8.16 7.663.347 3.79-.828 6.868-3.344 8.656a.824.824 0 01-.53.182zm29.956 1.572c-4.8 0-7.2-2.3-9.517-4.518-2.151-2.069-4.187-4.022-8.275-4.022S29.46 5.486 27.31 7.555c-2.317 2.218-4.7 4.518-9.517 4.518-4.8 0-7.2-2.3-9.516-4.518C6.124 5.486 4.088 3.533 0 3.533s-6.124 1.953-8.275 4.022c-2.317 2.218-4.7 4.518-9.517 4.518-4.8 0-7.2-2.3-9.516-4.518-2.152-2.069-4.188-4.022-8.276-4.022V1.746c4.8 0 7.2 2.3 9.517 4.518 2.152 2.069 4.187 4.022 8.275 4.022s6.124-1.953 8.276-4.022C-7.2 4.046-4.816 1.746 0 1.746c4.8 0 7.2 2.3 9.517 4.518 2.151 2.069 4.187 4.022 8.275 4.022s6.124-1.953 8.275-4.022c2.318-2.218 4.7-4.518 9.517-4.518 4.8 0 7.2 2.3 9.517 4.518 2.151 2.069 4.187 4.022 8.275 4.022s6.124-1.953 8.275-4.022c2.317-2.218 4.7-4.518 9.517-4.518v1.787c-4.088 0-6.124 1.953-8.275 4.022-2.317 2.234-4.717 4.518-9.517 4.518z'  stroke-width='1' stroke='none' fill='hsla(34, 100%, 95%, 1)'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
  background-position: center;
  min-height: 100%;
  background-repeat: no-repeat;
}

* {
  font-family: "IBM Plex Serif" !important;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

This is my index.css file. The SVG was generated using pattern.monster (wave 7, with colours WHITE #fff5e8 #fff5e8)

The background isn’t stored locally, but is fetched from the URL. The background shows in localhost, but not in production on heroku.

Anyone have any idea on whats happening?

How do you push data to firebase when a javascript button is clicked?

I am a complete noob when it comes to JavaScript and cannot seem to solve this problem.

I have a main.js file that was an output from Adobe animate. Within that is the following pertinent code I added:

this.button.name = "button";
    this.button.on("click", function (a) {
        var address = document.getElementById("addrs").value
        var data ={address:address}
        console.log(data)
    }.bind(this));

Right now, I’m just displaying the information I typed into the TextInput('addrs') to the console to verify everything works.

I also established a connection to a Firebase database within the index.js and there I have the following code:

push(ref(db), {
  address: "1234 Maple Ln",
});

This is just a static placeholder for me to verify Firebase can receive information.

What I am trying to do is push the information that is now currently being saved to var data ={address:address} to Firebase instead of the static address: "1234 Maple Ln".

All of the tutorials I’ve found online use an HTML form. How do you do this when the submit button is in a different JavaScript file than where the push() is?