Category: javascript

Category Added in a WPeMatico Campaign

wms url petition does not work with coordinates with decimals

I have this to get the point when the user clicks on a map using betterWms plugin

getFeatureInfoUrl: function (latlng) 
  {
    // Construct a GetFeatureInfo request URL given a point
    var point = this._map.latLngToContainerPoint(latlng, this._map.getZoom()), size = this._map.getSize(),
    params = {
          request: 'GetFeatureInfo',
          service: 'WMS',
          srs: 'EPSG:4326',
          styles: this.wmsParams.styles,
          transparent: this.wmsParams.transparent,
          version: this.wmsParams.version,      
          format: this.wmsParams.format,
          bbox: this._map.getBounds().toBBoxString(),
          height: size.y,
          width: size.x,
          layers: this.wmsParams.layers,
          query_layers: this.wmsParams.layers,
          info_format: 'application/json'
    };
    
    params[params.version === '1.3.0' ? 'i' : 'x'] = point.x;
    params[params.version === '1.3.0' ? 'j' : 'y'] = point.y;
    
    console.log(point);
    var url = this._url + L.Util.getParamString(params, this._url, true);

The url is valid when the clicked point has no decimals, so by just removing them works, but I need to use decimals.

I try changing the url decimal to %2E, %2C, and also for comma and point but neither of this solutions works, the only way of having a valid url is by removing the decimals.

This petition is being send to geoserver, the data is a shapefile and it displays in the correct places, the src is the same in geoserver and in the code (EPSG:4326).

I also try to change in the layer the decimals in the WFS section to 50 decimals but the petition is wms so I don’t know if this will do something or not.

Could you tell what could I do please?

Input name and store using localStorage in JS

I need help in localStorage in JS. I want a program that takes input from my website (of course not registered domain) and saves the input . My code of HTML is the following :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body bgcolor="lightyellow">
    <CENTER>
        <h1>Registeration Form</h1>
    </CENTER>
    <hr>
    <h2>Username :</h2>
    <input type="text" id="name">
    <br>
    <h2>Password: </h2>
    <input type="password" id="pass">
    <br>
    <button type="button" id="btn">SUBMIT</button>
    <script src="e.js"></script>
</body>
</html>

I tried storing the value using JS but it didnt work.

document.getElementById("btn").addEventListener("click", function() {
name = document.getElementById("name").value;
pass = document.getElementById("pass").value;
localStorage.setItem(name , "name");
localStorage.setItem(pass , "pass");
console.log(localStorage.getItem(name));
console.log(localStorage.getItem(pass));
})

I was of course doing something wrong here.
PLs help me

How do I make a sidebar slide-in from the right on button click?

I am sorry, I can’t show you the full code, but here’s what I can show:

<div class="navbar__main-container">
      <div class="navbar__container">...</div>
      <div class="navbar__sidebar-wrapper">
         <div class="navbar__sidebar"></div>
      </div>
</div>

CSS:

.navbar__main-container { 
  position: relative;
  &.show { 
    height: 100vh;
  }
}

.navbar__sidebar-wrapper {
  display: none;
  &.show { 
    display: flex;
    justify-content: flex-end;
    background-color: #1D1D1D33;
    position: absolute;
    top: 64px; 
    left: 0;
    width: 100%;
    height: calc(100% - 64px); 
    z-index: 10000;
  }

  & .navbar__sidebar { 
    position: relative;
    left: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 32px;
    gap: 8px;
    width: 375px;
    height: 100%;
    background-color: tokens.$color-bg-white;
    flex: none;
    order: 1;
    flex-grow: 0;
    transition: left 1s;
    &.show { 
      left: 0;
      transition: left 1s;
    }
   
  }
}

The .navbar__container element is the actual navbar, whereas the .navbar__sidebar-wrapper holds the sidebar (.navbar__sidebar), and is used for the background color.

There’s a burger button on the navbar. On click, class show is added to navbar__main-container, navbar__sidebar-wrapper and navbar__sidebar. On navbar__main-container, the show class adds the height 100vh. On navbar__sidebar-wrapper, the show class makes the element appear again by changing the display from none to flex, and on navbar__sidebar, it changes the left from 100% to 0, thereby it should cause the element to slide in, and it does if you check in/off the left style from inspect tools, but by just clicking the button, the sidebar (.navbar__sidebar) just appears without any transition.

I think the fact that the sidebar (navbar__sidebar) is inside an element wrapper that appears with instantly via display: none -> flex is probably what’s causing this issue, but I am not sure. Probably when the navbar__sidebar-wrapper appears, the transition is canceled, or something like that?

How else can I make it work? Do you have any ideas?

Please do not ask me to give a reproduction snippet. The rest of the code is too big, too irrelevant to this one particular functionality that I want to achieve, and it contains company information I would rather not share. I have given you the relevant part of the code.

Thanks in advance.

I tried making the navbar__sidebar position absolute, but it did not make a difference.
I tried using transform: translateX(0) and transform: translateX(100%); to hide/show the sidebar, but it did not work again. The slide-in transition is not working.

How to Assign a Specific key must have some values in interface

I am trying to extract either values into separate declaration and also it should so suggestion

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  bGColor?:
    | 'light'
    | 'primary'
    | 'secondary'
    | 'success'
    | 'info'
    | 'warning'
    | 'danger'
    | 'dark';
}

The color must be any of the above following values but while trying in the interface it looks ugly and trying to extract the value in separate variable.

I did with enum but its not suggest while calling bGColor Property.

const color = 'light'
    | 'primary'
    | 'secondary'
    | 'success'
    | 'info'
    | 'warning'
    | 'danger'
    | 'dark';
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  bGColor?: color
}

expecting something like this

How to “debounce” logic based on incoming requests?

I’m primarily a frontend developer and on the frontend side, I’m well familiar with the logic of debouncing. For example debouncing user input and calling a function only after user stopped typing.

Now I’m in a little bit different situation and I need something like this but on the backend and the “input” are incoming requests.

I don’t have any control over the “client” here as it’s external 3rd party service calling my webhook. The service is firing too many requests.

It fires a POST request every time a deal entity changed. Sometimes it fires 5 – 6 requests in close succession. In that case I want to process only the last one.

Here’s the frontend logic I would do on client side:

const timers = {};

const handleInput = (deal) => {
 clearTimeout(timers[deal.id]);
 timers[deal.id] = setTimeout(() => {
  // actual logic here, set deal into database or whatever
 }, 1000);
};

This would solve the problem. The edge case scenario that the input would keep firing requests consecutively and the logic would never trigger because it would always cancel and reschedule is not really realistic here.

How should I go about this on the backend? Which service is friendly for logic like this? CloudFlare workers? Netlify Functions?

I need some very easy to use storage that can be managed in between requests I assume.

Thanks!

I can not add class by using e.preventDefault() method in Javascript

`I made a menu bar with HTML and CSS. I would link to add a specific class and will be worked href by using JS wherever I click, but I click any menu Item a href is not working.

MY HTML code is here.

<div class="main-header">
      <h2><a href="index.html"> Javascript All projects </a></h2>
    </div>
    <div id="main-content">
      <div class="menu-bar-all-project">
        <ul>
          <li class="single-menu-class">
            <a href="index.html"> 1. Stopwatch </a>
          </li>
          <li class="single-menu-class">
            <a href="2_watch.html"> 2. Watch </a>
          </li>
          <li class="single-menu-class">
            <a href="3_countdown.html"> 3. Countdown </a>
          </li>
          <li class="single-menu-class">
            <a href="4_accordion.html"> 4. Accordion </a>
          </li>
          <li class="single-menu-class">
            <a href="5_popup.html"> 5. Popup </a>
          </li>
          <li class="single-menu-class">
            <a href="6_calculator.html"> 6. Calculator </a>
          </li>
        </ul>
      </div>

My Javascript code is here.

const mwMenuItem = document.querySelectorAll(".single-menu-class");
for (let i = 0; i < mwMenuItem.length; i++) {
  mwMenuItem[i].addEventListener("click", (e) => {
    for (let j = 0; j < mwMenuItem.length; j++) {
      if (i == j) {
        mwMenuItem[j].classList.toggle("mw-menu-active");
      } else {
        mwMenuItem[j].classList.remove("mw-menu-active");
      }
    }
    e.preventDefault();
  });
}`

Thank you in advance.

I tried in Googled an Yotube. However I did not get any expected result. 
I belive, someone will help me to fix it.

React conditional component rendering optimisation

Context: Let’s take an example of a complex product tile component with multiple child components which dictate how the tile looks[Image(required), Title(required), Price(optional), SellingPrice(required), Tags(optional), SpecialOffers(optional)]. Product Tile is used on the home page, search page and item page. Product Tile looks different on different pages. This is handled by conditionally rendering the children components of Product Tile.

Question: When the bundles are generated, the whole Product Tile component gets shipped for all the three pages regardless. This adversely affects the bundle size for pages which really don’t require all the features of the Product Tile to be displayed.

Approach 1 – Treat optional components like SpecialOffers as props and pass them only when required. This would mean that it is not a part of Product Tile anymore and is displayed only when passed as a prop. The consumers decide the rendering of the optional components by passing those components as props.

Advantages

  • reduce the complexity of the Product Tile component

Cons

  • Eventually bloat the component with conditional rendering logic

Approach 2 – Use composition and create separate versions of the Product Tile components for the home, search and item page by using atomic children components.

Advantages

  • Simpler components, easy to read and reason about

Cons

  • How do we decide which new feature addition requires a new version of the Product Tile component? Should I be creating a new version of the Product Tile component for every new variant?

I am leaning towards approach 2 as that would align with React’s principles. I want to know if there are any patterns around this or any thoughts.

Thanks!

How can i select multipal user

<div class="col-md-3 col-sm-12 mb-4">
  <div className='floating-label'>
    <select className='floating-select' onChange={formik.handleChange} name="select_employee" placeholder=" " onSubmit={setSelectedOption} closeMenuOnSelect={false} noOptionsMessage={()=> "No Employee Available"} required isMulti isSearchable // name="select_employee" // options={optionData} // className="basic-multi-select" // classNamePrefix="select" // placeholder=" " // onSubmit={setSelectedOption} // closeMenuOnSelect={false}
      // noOptionsMessage={() => "No Employee Available"} styles={{ placeholder: (baseStyles) => ({ ...baseStyles, // color: "#027581", }), control: (baseStyles) => ({ ...baseStyles, backgroundColor: "transparent", borderStyle: "none", borderWidth: "none",
      borderRadius: '0px', borderColor:'none', boxShadow: 'none', borderBottom: '1px solid #757575', transition: 'background-color 0.2s ease-in-out', '&:hover': { backgroundColor: "none", }, }), multiValueRemove: (baseStyles) => ({ ...baseStyles, color:
      "#000", }), multiValueGeneric: (baseStyles) => ({ ...baseStyles, color: "#fff", }), menuList: (baseStyles) => ({ ...baseStyles, backgroundColor: "#f3f3f9", }), option: (baseStyles, state) => ({ ...baseStyles, color: state.isFocused ? '#fff' : '#000',
      backgroundColor: state.isFocused ? '#1e90ff' : '#f3f3f9' }) } } >
      <option value=''> </option>
      {optionData.map((selectEmployee, index) => (
      <option key={index} value={selectEmployee.value}>{selectEmployee.label} </option>
      ))}</select>
    <span class="highlight"></span>
    <label>Select Employee</label>
  </div>
</div>

best solution and simple learning

TypeScript: Array in nested object seems to be empty even if its filled

i am new to the typescript/javascript frontend world. I have a vue project with typescript enabled.

I am trying to declare a simple typed object and then console.log it to look whats inside. It looks like this:

// an option is a single option that is selectable in the dropdown list
type optionItem = {
  value: string | number
  label: string
}

// an optionsCategory has an array of options and also includes a title for that category and some settings
type optionsCategory = {
  title: string
  options: optionItem[]
  defaultSelection?: optionItem
  isMultiSelect?: boolean
}

const testObject: optionsCategory = {
  title: "Test",
  options: [
    {
      value: "1",
      label: "Option 1",
    },
    {
      value: "2",
      label: "Option 2",
    },
  ],
}

console.log(testObject)
console.log(testObject.options)

The output looks like this.

enter image description here

In the first output console.log(testObject), the options array is empty. In the second, it is filled console.log(testObject.options). Why is that so?

I also tried it out in basic typescript projekt in codesandbox, there it just works: https://codesandbox.io/s/goofy-voice-lk2x32?file=/src/index.ts

These are the dependencies from the vue-project from the package.json, if its relevant.

"dependencies": {
    "@mdi/font": "7.0.96",
    "@mrolaolu/helpers": "^0.3.2",
    "axios": "^1.3.4",
    "date-fns": "^2.29.3",
    "dotenv": "^16.0.3",
    "haversine-distance": "^1.2.1",
    "pocketbase": "^0.11.0",
    "prettier": "^2.8.4",
    "prettier-plugin-tailwindcss": "^0.2.4",
    "roboto-fontface": "*",
    "swiper": "^9.1.0",
    "throttle-debounce": "^5.0.0",
    "vue": "^3.2.45",
    "vue-router": "^4.1.6",
    "vuex": "^4.1.0",
    "webfontloader": "^1.0.0"
  },
  "devDependencies": {
    "@types/throttle-debounce": "^5.0.0",
    "@vitejs/plugin-vue": "^4.0.0",
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.21",
    "sass": "^1.55.0",
    "tailwindcss": "^3.2.7",
    "typescript": "^4.9.3",
    "vite": "^4.1.0",
    "vue-tsc": "^1.0.24"
  }

These MongoDB errors starter appearing: MongoNetworkError: connect ETIMEDOUT and MongoServerSelectionError: connect ETIMEDOUT

I have been making a React and NextJS App for a month now and I use MongoDB for the database. I use it through MongoDB Atlas. It is also just the free version.

I use NextJS’s api folder for the backend.

I have had no problems at all and everything works just fine. Suddenly I have started to get these errors:

error - MongoNetworkError: connect ETIMEDOUT 18.166.253.100:27017
    at connectionFailureError (C:UsersasusDesktopmymart-sellernode_modulesmongodblibcmapconnect.js:383:20)
    at TLSSocket.<anonymous> (C:UsersasusDesktopmymart-sellernode_modulesmongodblibcmapconnect.js:307:22)
    at Object.onceWrapper (node:events:628:26)
    at TLSSocket.emit (node:events:513:28)
    at emitErrorNT (node:internal/streams/destroy:151:8)
    at emitErrorCloseNT (node:internal/streams/destroy:116:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  cause: Error: connect ETIMEDOUT 18.166.253.100:27017
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16) {
    errno: -4039,
    code: 'ETIMEDOUT',
    syscall: 'connect',
    address: '18.166.253.100',
    port: 27017
  },
  connectionGeneration: 0,
  page: '/64374cbc7f69b08c1cd4e68c/categories/Category/product%201',
  [Symbol(errorLabels)]: Set(1) { 'ResetPool' }

As well as this one:

error - MongoServerSelectionError: connect ETIMEDOUT 18.166.253.100:27017
    at Timeout._onTimeout (C:UsersasusDesktopmymart-sellernode_modulesmongodblibsdamtopology.js:277:38)
    at listOnTimeout (node:internal/timers:569:17)
    at process.processTimers (node:internal/timers:512:7) {
  reason: TopologyDescription {
    type: 'ReplicaSetNoPrimary',
    servers: Map(3) {
      'ac-rtwqyt0-shard-00-01.cln6x4h.mongodb.net:27017' => [ServerDescription],
      'ac-rtwqyt0-shard-00-02.cln6x4h.mongodb.net:27017' => [ServerDescription],
      'ac-rtwqyt0-shard-00-00.cln6x4h.mongodb.net:27017' => [ServerDescription]
    },
    stale: false,
    compatible: true,
    heartbeatFrequencyMS: 10000,
    localThresholdMS: 15,
    setName: 'atlas-hup2a6-shard-0',
    maxElectionId: null,
    maxSetVersion: null,
    commonWireVersion: 0,
    logicalSessionTimeoutMinutes: 30
  },
  code: undefined,
  page: '/api/new-variation',
  [Symbol(errorLabels)]: Set(0) {}
}

I dont think the problem is with my code and how it receives the data since even an old project from a React and NextJs course started to get this issue.

Im not using a vpn or something to change my IP address either.

Does anyone know what causes this? Is there a setting or option that could have changed that I need to fix?

Is MongoDB currently under maintenance or full?
Any help would be greatly appreciated. Feel free to ask any questions.

Thank you!

how to get data from normal Javascript file and use data in text/babel file

const { Table, Checkbox } = rsuite;
const { Column, HeaderCell, Cell } = Table;
function MultiSelectTable() {
    const [checkedKeys, setCheckedKeys] = React.useState([]);
    const [data, setData] = React.useState([]);
    React.useEffect(() => {
        fetch(fetchUrl)
          .then(res => res.json())
          .then(json => setData(json["oslc:results"]))
      }, []); 

    let checked = false;
    let indeterminate = false;

    if (checkedKeys.length === data.length) {
        checked = true;
    } else if (checkedKeys.length === 0) {
        checked = false;
    } else if (checkedKeys.length > 0 && checkedKeys.length < data.length) {
        indeterminate = true;
    }

    const handleCheckAll = (value, checked) => {
        const keys = checked ? data.map(item => item["oslc:label"]) : [];
        setCheckedKeys(keys);
        console.log(keys);
    };
    const handleCheck = (value, checked) => {
        const keys = checked ? [...checkedKeys, value] : checkedKeys.filter(item => item !== value);
        setCheckedKeys(keys);
        console.log(keys);
    };
    const CheckCell = ({ rowData, onChange, checkedKeys, dataKey, ...props }) => (
        <Cell {...props} style={{ padding: 0 }}>
            <div style={{ lineHeight: '46px' }}>
                <Checkbox
                    value={rowData[dataKey]}
                    inline
                    onChange={onChange}
                    checked={checkedKeys.some(item => item === rowData[dataKey])}
                />
            </div>
        </Cell>
    );

    return (
        <div style={{ padding: 20 }}>
            <Table virtualized height={400} data={data}>
                <Column width={100} align="center" fixed>
                    <HeaderCell style={{ padding: 0 }}>
                        <div style={{ lineHeight: '40px' }}>
                            <Checkbox
                                inline
                                checked={checked}
                                indeterminate={indeterminate}
                                onChange={handleCheckAll}
                            />
                        </div>
                    </HeaderCell>
                    <CheckCell
                        dataKey="oslc:label"
                        checkedKeys={checkedKeys}
                        onChange={handleCheck}
                    />
                </Column>

                <Column width={150} align="center" fixed>
                    <HeaderCell>ID</HeaderCell>
                    <Cell dataKey="oslc:label" />
                </Column>

                <Column width={200}>
                    <HeaderCell>Title</HeaderCell>
                    <Cell dataKey="koatl:apiTitle" />
                </Column>
                <Column width={300}>
                    <HeaderCell>Description</HeaderCell>
                    <Cell dataKey="koatl:apiDescription" />
                </Column>
            </Table>
        </div>
    );
}
ReactDOM.render(<MultiSelectTable />, document.getElementById('example'));

This is my app.js file I want data from custom.js file.

let fetchUrl;
async function getData(url) {
    console.log(url)
    const response = await fetch(url, {});
    if (!response.ok) {
        throw Error(response.statusText);
    }
    const data = await response.json();
    return data;
}
async function initialize(url) {
    fetchUrl=url;
    var requestInProgress=false;
    if(!requestInProgress){
        requestInProgress = true;
        let response = await getData(url);
    }
}

<input type="text" id="filter-text-box" style="width:300px;height:40px" placeholder="Filter..." oninput="onFilterTextBoxChanged()">

             <div id="example" style="height:350px">
             </div>
          </div>
             <script type="text/babel" src="{{ url_for('dialog.static', filename='static/app.js') }}"></script>
            <script type="text/javascript" src="{{ url_for('dialog.static', filename='static/main.js') }}"></script>

function createURL() {
            var gc_context = "{{ gc_context }}";
            var type = document.getElementById('queryServices');
            typeId = type.value;
            //console.log("Configuration:"+ configurationId.length);
            if ((componentId != '*') && typeId != "*") {
                /**if (gc_context.length>0 && gc_context!='None') {
                    selectorUrl = "" + "/oslc/component/" + componentId + "/config/" + gc_context + "/selection/" + typeId + "/selector";
                    console.log("URL created with context "+gc_context + ": n"+ selectorUrl);
                    initialize(selectorUrl);
                } else {
                    selectorUrl = "" + "/oslc/provider/" + componentId + "/resources/" + typeId + "/selector";
                    console.log("URL created without context: " + "n"+ selectorUrl);
                    initialize(selectorUrl);
                }*/
                selectorUrl = "" + "/oslc/provider/" + componentId + "/resources/" + typeId + "/selector";
                console.log("URL created without context: " + "n" + selectorUrl);
                initialize(selectorUrl);
            }

        }

here you can see that from the HTML file I am sending the URL to the custom.js file then I want the custom.js file should go app.js text/babel file. But the value only goes to the custom.js file but not going to app.js. I tried direct to HTML to app.js still not going. How can I send to data to app.js because app.js is not a normal js file another problem is app.js file is only the first time running but here When we have selectorUrl we want the app.js file should run otherwise not. How can I do that? Please help me with that. And I am using jinja template.

How to send oAuth code from Visualforce page to LWC Components Which are on 2 different Windows Using Post Messages?

I’m new to salesforcce developement tried integrating two salesforce org’s using oAuth Webserver flow i’m getting the callback code to a vf page but when i’m sending the code using post messages to Lwc it’s throwing following error

Can any one suggest a way to do oAuth Web server flow using Lwc

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://bnthinc-8d-dev-ed.develop.lightning.force.com') does not match the recipient window's origin ('https://bnthinc-8d-dev-ed--testingbnth.develop.vf.force.com').

Code in vf Page to Post Message

<apex:page >

  <script>
    //window.top.postMessage(window.location.hash.substring(1),'https://bnthinc-8d-dev-ed.develop.lightning.force.com');
     parent.postMessage('Code','https://bnthinc-8d-dev-ed.develop.lightning.force.com');
  </script>

</apex:page>

Code in LWC to Catch Message

 doAuth(){

        let oAuthUrl=`${BASE_URL}?client_id=${client_Id}&redirect_uri=${redirected_Uri}&response_type=code`;
        window.open(oAuthUrl);

        window.onmessage((msg)=>{
            console.log('Data>>',msg.data);
            console.log('Message>>',msg);
        })
    }

I’m new to salesforcce developement tried integrating two salesforce org’s using oAuth Webserver flow i’m getting the callback code to a vf page but when i’m sending the code using post messages to Lwc it’s throwing following error

Can any one suggest a way to do oAuth Web server flow using Lwc

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://bnthinc-8d-dev-ed.develop.lightning.force.com') does not match the recipient window's origin ('https://bnthinc-8d-dev-ed--testingbnth.develop.vf.force.com').

How can I populate an array with a current variable and retrieve the prior, not the current, variable from this array all with javascript?

What I have here is part of a larger project, but I have tried to isolate my current issue by stripping out the rest of the program to just show the current issue. There may be a couple of remnants of other stuff remaining, that in the current setting do not do anything, but are used in the full program.

What I am currently trying to do with what is shown below is as follow:

1/ When I click on a number in the lower display, it should show in the upper display under new number. This does operate fine as it should.

2/ When the next number is clicked on, I would like to see the prior number show up in the prior number section. This does not work.

I am assuming that this can be done by creating a blank array (myARR) with javascript, adding the new value of the next clicked number to the array and then reading the prior number that would then be in the second position of the array?

3/ I would also like to keep a running count of numbers clicked on. Also not working.

I am assuming that this could be accomplished by using the javascript length property on the array.

I think I have a rough idea of the processes (but I may be wrong), but I am having a devil of a time trying to get the coding to work, thank you. The alert window response will not be in the end product, as I am just using it currently to get a response that I can see and work from, but all I am getting is undefined.

Thanking anyone for their assistance,
Stan

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<script type='text/javascript'
src='jquery-1.3.2.min.js'></script>
<script type="text/javascript">


</HEAD>
<script type='text/javascript'
src='jquery-1.8.3.js'></script>


<BODY STYLE="background-color: yellow" >


<TABLE width="100%" border="1" >
<TR>

    
<script type="text/javascript">
  function reply_click(clicked_id)
  {
      //alert(clicked_id);
    //document.write(clicked_id);
    document.getElementById("clicked_id").innerHTML = clicked_id;
        
let myARR = clicked_id[12];
    
    //document.write(myArr[0]);
    //var clicked_id = pmARR(2);
    //var myARR = [clicked_id];
    //myARR = clicked_id;
    //var (clicked_id) = pmAAA[];
    
//var clicked_id = myARR[2];
        
//myARR.push(clicked_id);


//console.log(myARR[0,5]);





alert (myARR);


//alert(myARR);

//document.writeln((i+1) + ": " + myARR[i]);


  }
</script>


<TD><CENTER>

<B>



<B>NEW NUMBER</b><BR>


<span style="font-size: 89px" id="clicked_id"></span>


<HR width="100%">


<B>Prior Number</b><BR>




<Script>

console.log(myARR().value);
</script>

<HR width="100%">

<B>How Many Numbers Picked</b><BR>

<SCRIPT>
myARR.length:
</script>

</center>


<FORM NAME="numbers">
<TABLE WIDTH="100%" CELLPADDING="0" CELLSPACING="0" >



&nbsp;


<P>



<TR><TD COLSPAN="3">
<!-- numbers table -->
<TABLE WIDTH="100%" BORDER="1" CELLPADDING="0" CELLSPACING="1" STYLE="background-color: #0080FF; font-size: x-large; font-family: sans-

serif; font-weight: 900; text-align: center" bgcolor=#0080FF>
<TR>

<TD button id="01" onClick="reply_click(this.id);ManualColorBlue(this);" ondblclick="ManualColorBACK(this)"><BIG>1</button>
<TD button id="02" onClick="reply_click(this.id);ManualColorBlue(this);" ondblclick="ManualColorBACK(this)"><BIG>2</button>
<TD button id="03" onClick="reply_click(this.id);ManualColorBlue(this);" ondblclick="ManualColorBACK(this)"><BIG>3</button>
<TD button id="04" onClick="reply_click(this.id);ManualColorBlue(this);" ondblclick="ManualColorBACK(this)"><BIG>4</button>
<TD button id="05" onClick="reply_click(this.id);ManualColorBlue(this);" ondblclick="ManualColorBACK(this)"><BIG>5</button>
<TD button id="06" onClick="reply_click(this.id);ManualColorBlue(this);" ondblclick="ManualColorBACK(this)"><BIG>6</button>
<TD button id="07" onClick="reply_click(this.id);ManualColorBlue(this);" ondblclick="ManualColorBACK(this)"><BIG>7</button>
<TD button id="08" onClick="reply_click(this.id);ManualColorBlue(this);" ondblclick="ManualColorBACK(this)"><BIG>8</button>
<TD button id="09" onClick="reply_click(this.id);ManualColorBlue(this);" ondblclick="ManualColorBACK(this)"><BIG>9</button>
<TD button id="10" onClick="reply_click(this.id);ManualColorBlue(this);" ondblclick="ManualColorBACK(this)"><BIG>10</button>
<TD button id="11" onClick="reply_click(this.id);ManualColorBlue(this);" ondblclick="ManualColorBACK(this)"><BIG>11</button>
<TD button id="12" onClick="reply_click(this.id);ManualColorBlue(this);" ondblclick="ManualColorBACK(this)"><BIG>12</button>



</TD></TR></TABLE>
<!-- end numbers table -->


</TABLE>
</FORM>


</BODY>
</HTML>