Category: javascript

• components/a/inputone.vue

<template>
  <div><input type="checkbox" v-model="checked" />one</div>
</template>

<script>
export default {
  name: "inputone",
  components: {},
  data() {
    return {};
  },
};
</script>

• components/b/inputtwo.vue

<template>
  <div><input type="checkbox" v-model="checked" />two</div>
</template>

<script>
export default {
  name: "inputtwo",
  components: {},
  data() {
    return {};
  },
};
</script>

 - **components/maincontent/maincontent.vue**

<template>
  <div>
    <div class="container" id="app-container" v-if="!checked">
      <p>Text is visible</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "maincontent",
  components: {},
  data() {
    return {
      checked: false,
    };
  },
  methods: {
    hidecont() {
      this.checked = !this.checked;
    },
  },
};
</script>

I have three components called inputone(contains checkbox with v-model),inputtwo(contains checkbox with v-model),maincontent.(having some content and logic), So when user click on checkboxes from either one checckbox(one,two). i schould hide the content.

Codesanfdbox link https://codesandbox.io/s/crimson-fog-wx9uo?file=/src/components/b/inputtwo.vue

I am trying to create an image viewer in javascript. So, there’s this function where I am decreasing the size of image when ‘-‘ button is pressed or mouse wheel is scrolled downwards. But after the image’s height goes below 10px, I can’t enlarge it back anymore. So, to tackle that issue, I thought of putting an if statement where it’ll check the height of the image and won’t decrease the size if it’s not above 10px. But, that if statement is not working. And I can’t figure out why.

Below is a piece of my code. I tried to put an console.log() to check if it’s going into the if statement or not. But, it’s not going.

function decrease_image(){
    var img = new Image();
    img = image_viewer_pics[current_viewer_image];
    
    if (img.style.height < "100%"){
        img.style.margin = "auto 0px";
    }

    if (img.style.height > "10px"){
        img.height = img.height / 1.1;
        console.log("greater than 10px");
    }
    
}

Problem

When I try to use the code (see below), the div is only centered when I use width: 100px;.

<div style="border: solid 1px black; width: 100px; height: 100px; background-color: blue; margin-left: auto; margin-right: auto;">

Since I want to assign a much longer width to the text and set the width to 500px, the div is no longer centered.

I want to make an auto-scroll down on my WordPress website which was built with elementor. In this video, you see that the auto-scroll code worked every page but I don’t want that. I want that for each page(Screenshot). The scroll will be stopping in the red mark section.
How can I do it? Anyone can help me kindly.

The page link is:- https://hf1.graycyan.ca/xyz-xyz-5/
The auto-scroll will be working just for this page.

Here have a video link:- https://drive.google.com/file/d/1yKPEtvGa82UB2kqSYXvXHg1M4r7B4Ecv/view?usp=sharing

The jQuery code is:-

The auto-scroll will be working just for this page. and will stop the red mark section.

i have a JS Class which is making a function of giving a border to an element when i click to another element. That means when i click on .trigger class element, it will give a border to .content class element. But this function only should be happen based on a Boolean condition. If Boolean is Yes it should be give border, other wise i should not work. My code is works when i set the method inside the constructor parenthesis with this keyword and i can also declare variable there. But I need the method outside the constructor based on my other code. So how can i possible to declare vaiable outside the constructor and inside the class. I need this using Class approach based on my project. My code is as follows. Hope someone can help me on this. Thanks in advance!

class ParentSelector {
    constructor(trigger, content, condition) {
        this.trigger = document.querySelector(trigger);
        this.content = document.querySelector(content);
    }

    let outline = condition;

    makeOutline(){
        this.trigger.addEventListener("click", (e) => {
            if (condition) {
                e.target.nextElementSibling.style.border = "2px solid red";
            }
        })
    }    
    
}

let a = new ParentSelector(".trigger",".content", true);
a.makeOutline();

<div class="one">
<div class="trigger">Trigger</div>
<div class="content">Content</div>
</div>

I have this accordion opening all tabs at same time but i want it to open one tab at one time and when you click on other tab it closes the previous tab.
I tried to play with the javascript but only I can get is the tab not opening completely.

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

<button class="accordion">Section 1</button>
<div class="panel">
  <p>CONTENT 1</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>CONTENT 2</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>CONTENT 3.</p>
</div>

I have problem that when my code auto refreshes after I saved the file on VS Code, theText and theBtn returns the targeted elements and the page displays the content and everything works fine. But whenever I refresh the page manually, the page displays the content, but when I clicked theBtn element to expand the text, the theText and theBtn becomes empty and the page failed with an error saying “cannot read property of undefined”.

I have been trying to find why, but I could not. Someone please help.
Thank you.

import { React, useEffect, useState } from 'react';
    import places from '../data/places';


const Tours = () => {
return (
    <>
        <div className="my-20 mx-auto bg-blue-100 " style={{ height: "100%" }}>
            <h1 className="text-5xl capitalize text-center font-semibold">our tours</h1>
            <hr className="w-20 place-self-center mx-auto border-2 mb-12 mt-2 border-green-600" />
            <Tuor cTime={new Date().getTime().toString()} />
        </div>
    </>
)
}

const Tuor = (props) => {

const [tuors, setTours] = useState(places);

 const theText = document.querySelectorAll(".theText")
 const theBtn = document.querySelectorAll(".theBtn")
        console.log(theText);
        console.log(theBtn);


const expandText = (index) => {

    if (theBtn[index].innerHTML === "read more") {
        theText[index].style.maxHeight = "50rem";
        theBtn[index].innerHTML = "show less";
    } else if (theBtn[index].innerHTML === "show less") {
        theText[index].style.maxHeight = "6rem";
        theBtn[index].innerHTML = "read more";

    }
}

const removePlace = (id) => {
    const newTours = tuors.filter((place) => {
        return place.id !== id;
    });
    setTours(newTours);
}
return (
    <>
        {
            tuors.map((place, index) => {
                let price = new Intl.NumberFormat().format(place.price);
               
                return (
                    <>
                        <div key={index} className="flex flex-col w-2/4 mx-auto bg-white shadow-2xl mb-10">

                            <div>
                                <img src={place.image} alt={place.title} />
                            </div>

                            <div className="flex mt-10">
                                <div className="flex justify-start w-3/4 pl-10">
                                    <p className="tracking-widest capitalize font-bold">{place.title}</p>
                                </div>
                                <div className="flex justify-end w-1/4 pr-10"><p className="bg-blue-50 tracking-wider p-1 rounded-lg font-bold text-blue-400">N{price}</p></div>
                            </div>
                            <div className="my-5 px-10 py-2">
                                <p className="text-gray-500 theText">{place.description}</p><button className="text-blue-500 capitalize theBtn" onClick={() => expandText(index)}>read more</button>
                            </div>
                            <button className="ring-1 ring-red-600 text-red p-1 rounded-sm w-48 mx-auto capitalize my-12" onClick={() => removePlace(place.id)}>not interested</button>
                        </div>

                    </>
                )
            })
        }
    </>
)
}


export default Tours;

how can I use the submiting data related to image pass to server using multer before uploading it to disk .Is it possible ? if not then please give me another solution.
I want to check the size of file its should be at least 4mp resolution ,if its has lesser then that the images should not be uploaded and send the error msg

exports.uploadimg=(req,res,next)=>{
  
    uploadphoto(req, res, (err) => {
        if (err) {
            res.render("upload")
        }
        else {


    
            

          


           
            res.send("photo uloaded")
        }
    })

[enter image description here][1]
[1]: https://i.stack.imgur.com/DYLDZ.jpg

like you can see there is a section contaning different lesson this is in sorter formate know user can change the order after creating any section or lesson how can i do that

I can’t quite figure out how to save the selection for dark/light mode as a cookie.

Here is the webpage I am trying it on:
https://schooloffish.info/index.html

Tried w3schools code for cookies but I can’t get it to work. Any help is appreciated.

I’m trying to extend a built-in javascript function via prototype, but when I attempt to refer to this, Window is returned. Given that I don’t really have access to rewrite the implementation, are there any ways to get around this?

Specifically I’m trying to extend URLSearchParams in such a way that it unsets values properly. Something like:

URLSearchParams.prototype.setOrUnset = (key, val) => {
    if(val){
        this.set(key, val)
    } else {
        this.delete(key)
    }
}

hello i have creating a pragam that delete one array from another but. And it works fine i think but if i put 2 same value simultaneously, it remove only one value because of second argument of splice function. How can i check after deleting a element again if there any other number left my code is below.

const arr1 = [1, 2, 2, 3, 5, 2, 3, 7];
const arr2 = [2, 3];

let countArr = [];
for (let i = 0; i < arr2.length; i++) {
  for (let j = 0; j <= arr1.length; j++) {
    if (arr1[j] === arr2[i]) {
      arr1.splice(j, 1);
    }
  }
}
console.log(arr1);

<!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">
  <title>Document</title>
</head>

<body>

  <script src="demo.js"></script>
</body>

</html>

I have my fully working app here that I’m trying to host on a localhost server using Express.js

https://jsfiddle.net/mostafa91/6axesy2t/2/

Here is my server.js that I run with “node server.js”:

const express = require('express');
const app = express();
const port = 2525;

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/public/Gameboard.html');
});

app.listen(port, () => {
    console.log(`Tic-Tac-Toe listening at http://localhost:${port}`);
});

app.use(express.static('public'));

I keep getting errors when I try to play the game (vs. Players option):

Uncaught TypeError: Cannot read properties of null (reading 'classList')
    at setBoardHoverClass (Gameboard.js:74)
    at startGame (Gameboard.js:32)
    at Gameboard.js:20

I’ve included my file structure as well:

Het all I can not seem to get this below code to work:

var links = doc.DocumentNode.SelectSingleNode("/html/body/div[1]/div/div[4]/div/div/div[2]/div[2]/span[1]");

foreach (HtmlNode item in table.SelectNodes("//span[1]/descendant::a[starts-with(@href,'/photo')]"))
{
    console.log("test");
}

It keeps telling me:

Uncaught SyntaxError: missing ) after argument list

It looks like all my “)” are present and in the correct spots?

the HTML that I am getting the links from looks like this:

<span>
  <a href="/photo356.png" class="_4dvp" id="_D9">
    <div class="_403j">
      <i class="im_2sxw" style="width:100px;height:100px;" aria-label="pic" role="img"></i>
      <div class="_5fef">
        <div class="_5feg" role="link" aria-label="25">
          <i class="imgMGdk7"></i>25
        </div>
        <div class="fezg" role="link" aria-label="15">
          <i class="_imgsp_l0"></i>15
        </div>
      </div>
    </div>
  </a>
  <a href="/photo17814561.png" class="_39pvp" id="u3_sz">
    <div class="_403j">
      <i class="imgxw" style="width:100px;height:100px;" aria-label="pic61" role="img"></i>
      <div class="_5f">
        <div class="fzeg" role="link" aria-label="23">
          <i class="_img2e1b6"></i>23
        </div>
    ...etc....

the XPath starts at the . The XPath is this:

/html/body/div[1]/div/div[4]/div/div/div[2]/div[2]/span[1]

But like I said above I just get that JS error. I’m not even sure my XPATH logic is even correct since I’m not able to pass this error and continue on…

Help would be great!

I want to make a js library, and I have all the code. Libraries like Jquery can let you do like

<script src = "..."></script>
<script>
//uses the library
</script>

without the import * from JQuery.
How can I do this without declaring the library a modular or importing?