当我的下一个过滤器(基本上是一个条件)与JS匹配时，如何在浏览器上清除或覆盖document.write() [英] how to clear or overwrite document.write() on browser when my next filter(basically a condition) match in JS

问题描述

我有一个对象数组.

let mainMenu = [
    {
        brand: "Zara",
        type: "Shirt",
        gender: ["Men", "Women", "Boys", "Girls"],
        size: "Small",
        image: "",
        description: "",
        price: "300",
        colour: "Red",
        stock: "10",
        discount: 5,
        rating: "4"
    },
    {
        brand: "Nike",
        type: "Shirt",
        gender: ["Men", "Women", "Boys"],
        size: "Medium",
        image: "",
        description: "",
        price: "600",
        colour: "Red",
        stock: "20",
        discount: 5,
        rating: "5"
    },
    {
        brand: "Adidas",
        type: "Shirt",
        gender: ["Men", "Women"],
        size: "Large",
        image: "",
        description: "",
        price: "700",
        colour: "Red",
        stock: "30",
        discount: 5,
        rating: "5"
    },
    {
        brand: "Puma",
        type: "tShirt",
        gender: ["Boys", "Girls"],
        size: "Small",
        image: "",
        description: "",
        price: "600",
        colour: "Red",
        stock: "40",
        discount: 5,
        rating: "5"
    },
    {
        brand: "Nike",
        type: "tShirt",
        gender: ["Men", "Women", "Girls"],
        size: "Medium",
        image: "",
        description: "",
        price: "400",
        colour: "Red",
        stock: "50",
        discount: 5,
        rating: "4"
    },
    {
        brand: "Zara",
        type: "tShirt",
        gender: ["Women", "Boys", "Girls"],
        size: "Large",
        image: "",
        description: "",
        price: "600",
        colour: "Red",
        stock: "40",
        discount: 5,
        rating: "5"
    },
    {
        brand: "USPA",
        type: "Jeans",
        gender: ["Men"],
        size: "Small",
        image: "",
        description: "",
        price: "2000",
        colour: "Red",
        stock: "30",
        discount: 5,
        rating: "4"
    },
    {
        brand: "Adidas",
        type: "Jeans",
        gender: ["Women"],
        size: "Medium",
        image: "",
        description: "",
        price: "2500",
        colour: "Red",
        stock: "20",
        discount: 5,
        rating: "5"
    },
    {
        brand: "Puma",
        type: "Jeans",
        gender: ["Boys"],
        size: "Large",
        image: "",
        description: "",
        price: "3000",
        colour: "Red",
        stock: "10",
        discount: 5,
        rating: "4"
    }
];

let filteredArr = [];
filteredArr = mainMenu;

我想搜索一件衬衫，如果存在的话，那么想使用 document.write()进行展示.我的输入是: let searchForType ="Shirt"; .

I want to search for a Shirt, if exist then want show using document.write(). My input is: let searchForType = "Shirt";.

我的代码是:

function fetchItemsByType() {
    let isItemAva = filteredArr.filter(obj => obj["type"] === searchForType);
    isItemAva.forEach(obj => {
        for (let i = 0; i < obj["type"].length; i++) {
            if (obj["type"] === searchForType) {
            }
        }
        document.write(obj["type"] + " of " + obj["size"] + " size is Available for " + obj["gender"] + "<br>" + "<br>")
    });
    return isItemAva;
}
let getItemsByType = fetchItemsByType();

if (searchForType === searchForType) {
    console.log(getItemsByType);
}

输出:

Shirt of Small size is Available for Men,Women,Boys,Girls

Shirt of Medium size is Available for Men,Women,Boys

Shirt of Large size is Available for Men,Women

下一次，我想检查衬衫尺码的可用性.如果有可用尺寸，则再次希望仅显示衬衫尺寸的结果(由document.write())不是所有衬衫的结果.我尝试过，但同时获得了两种情况的结果.但我想在最终输出中仅显示选定尺寸的衬衫.下面是我输入衬衫尺寸即'Small'时的代码.

Next time, I want to Check the availability of Shirt's size. If size is available then again want to show(by document.write()) only result(s) of Shirt's size not all Shirt's results. I tried but getting both cases results at the same time. But I want to show only selected size's Shirt(s) in my final output. Below is the code when I enter shirt's size i.e. 'Small'.

function fetchItemsBySize() {
    let isSizeAva = getItemsByType.filter(obj => obj["size"] === searchForSize);
    isSizeAva.forEach(obj => {
        for (let i = 0; i < obj["size"].length; i++) {
            if (obj["size"] === searchForSize) {
            }
        }
        document.write(obj["type"] + " of " + obj["size"] + " size is Available for " + obj["gender"] + "<br>" + "<br>")
    });
    return isSizeAva;
}
let getItemsBySize = fetchItemsBySize();

if (searchForSize === searchForSize) {
    console.log(getItemsBySize);
}

输出为:

Shirt of Small size is Available for Men,Women,Boys,Girls

Shirt of Medium size is Available for Men,Women,Boys

Shirt of Large size is Available for Men,Women

Shirt of Small size is Available for Men,Women,Boys,Girls

但我只想要

Shirt of Small size is Available for Men,Women,Boys,Girls

有可能吗?

推荐答案

因此，如果我理解正确，则您不想简单地将第二个输出附加到先前的输出，而是想清除先前的输出，然后写入新的输出.我认为您可以通过两种不同的方法来解决此问题.

So if I understood it correctly, you don't want to simply append the second output to the previous output, instead you want to clear the previous output and then write the new output. I think you have two different ways to approach this.

1. 您可以擦除整个输出，然后再次写入，但是这次您可以省略不需要的行.使用 document.open()创建一个新的空文档.
2. 您可以使用标签来仅更改该标签的内容，例如，可以在此新标签内显示T恤尺寸的东西，这样您就可以轻松替换标签内容而无需更改其余的输出.可以通过给div和id来实现.

<div id="myDiv">
</div>

然后在您的js代码中...

And in your js code...

let myDiv = document.getElementById("myDiv")
myDiv.innerHTML = "This is my output"

希望这对您有帮助...请让我知道，如果您有任何疑问.

Hope this helps... Please, let me know if you have any questions.

这篇关于当我的下一个过滤器(基本上是一个条件)与JS匹配时，如何在浏览器上清除或覆盖document.write()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！