如何獲得這種形式的 div id？

Question

使用應用程序將用戶在應用程序上鍵入的內容導出到具有類似組件的特定網站。 例如，如果用戶在應用程序上輸入了一個標題，當他按下一個按鈕時，它會將該值導入到一個同樣要求用戶輸入的網頁中。

這是流程圖什么的

用戶--> 用戶在應用程序中輸入文本--> 應用程序復制用戶輸入的內容--> 應用程序打開特定網站--> 應用程序將他復制的內容粘貼到網站。

（網站：以谷歌表單為例。）

現在我已經完成了所有的工作，除了后一部分應用程序粘貼了他復制的內容。

問題是應用程序不知道在哪里粘貼它。

所以我想得到下面代碼的 ID，如果你只是識別所有的 ID 或類似的東西以及如何調用它，那就太好了。

已成功從后端導入數據，但對如何獲取文本區域、單選按鈕、div 的 id 或變量名稱一無所知。

javascript:

(function () {
function WW(ele, val)
{
    if(document.getElementById(ele) && val != "")
    {
        document.getElementById(ele).value = val;
    }
}
WW("story-title", "The Good Peacock");
)();

這是從某人那里復制的。

這適用於具有 id 的其他網站，例如：

<textarea id="story-title">

所以，需要知道下面HTML的 id。

這是網站源代碼的一部分，它是自動填充的。

嘗試使用getElementByClassName()調用，但沒有奏效。

 <form class="main-edit-form"> <div class="required-form-wrapper"> <div class="form-group title-form"> <label>Title</label> <span class="empty-warning hidden" id="title-warning">Required</span> <div contenteditable="true" class="story-title">Untitled Story</div> </div> <div class="form-group description-form"> <div class="form-wrapper"> <label>Description</label> <span data-toggle="popover" class="popover-icon" id="description-tooltip" title="" data-original-title="Add a story description"><span class="fa fa-info fa-wp-lightergrey " aria-hidden="true" style="font-size:16px;"></span></span> <span class="empty-warning hidden" id="description-warning">Required</span> </div> <textarea type="text" name="title" class="story-description "></textarea> </div> <div class="form-group tags-form"> <div class="form-wrapper"> <label>Tags</label> <span data-toggle="popover" class="popover-icon" id="tags-tooltip" title="" data-original-title="Help readers find your story"><span class="fa fa-info fa-wp-lightergrey " aria-hidden="true" style="font-size:16px;"></span></span> <span class="empty-warning hidden" id="tag-empty-warning">Required</span> </div> <div class="tag-container"> <div id="editable-tags"> <div class="component-wrapper" id="component-TagGrid-storyTags-/myworks/new"></div> </div> <div id="add-tag" class="tag-item with-icon on-add-tag"> <span>Add a tag</span><span class="fa fa-plus fa-wp-black " aria-hidden="true" style="font-size:12px;"></span> </div> <span id="tag-input-wrapper"> <input id="tag-input" class="hidden on-tag-input" placeholder="Separate tags with a space" autocomplete="off"> </span> </div> </div> <div class="form-group inline-form"> <div class="form-wrapper"> <label for="categoryselect">Genre</label> <span data-toggle="popover" class="popover-icon" id="category-tooltip" title="" data-original-title="Tell Wattpad the genre of your story"><span class="fa fa-info fa-wp-lightergrey " aria-hidden="true" style="font-size:16px;"></span></span> <select id="categoryselect" class="form-control "> <option value="-1">Select a genre</option> <option value="14">Action</option> <option value="11">Adventure</option> <option value="24">ChickLit</option> <option value="6">Fanfiction</option> <option value="3">Fantasy</option> <option value="21">General Fiction</option> <option value="23">Historical Fiction</option> <option value="9">Horror</option> <option value="7">Humor</option> <option value="8">Mystery / Thriller</option> <option value="16">Non-Fiction</option> <option value="12">Paranormal</option> <option value="2">Poetry</option> <option value="19">Random</option> <option value="4">Romance</option> <option value="5">Science Fiction</option> <option value="17">Short Story</option> <option value="13">Spiritual</option> <option value="1">Teen Fiction</option> <option value="18">Vampire</option> <option value="22">Werewolf</option> </select> <span class="empty-warning hidden" id="category-empty-warning">Required</span> </div> </div> </div> <div class="inline-form-wrapper"> <div class="inline-form-row"> <div class="form-group inline-form"> <div class="form-wrapper"> <label>Language</label> <span data-toggle="popover" class="popover-icon" id="language-tooltip" title="" data-original-title="What language is your story in?"><span class="fa fa-info fa-wp-lightergrey " aria-hidden="true" style="font-size:16px;"></span></span> <select id="languageselect" class="form-control "> <option value="1" selected="selected">English</option> <option value="2">Français</option> <option value="3">Italiano</option> <option value="4">Deutsch</option> <option value="5">Español</option> <option value="6">Português</option> <option value="38">Català</option> <option value="19">Tiếng Việt</option> <option value="18">Filipino</option> <option value="20">Bahasa Indonesia</option> <option value="22">Bahasa Melayu</option> <option value="32">ภาษาไทย</option> <option value="7">Русский</option> <option value="15">Română</option> <option value="23">Türkçe</option> <option value="24">Česky</option> <option value="14">Polski</option> <option value="28">Magyar</option> <option value="30">ελληνικά</option> <option value="35">Eesti</option> <option value="36">Latviešu</option> <option value="37">Lietuvių</option> <option value="39">Босански</option> <option value="40">Српски</option> <option value="41">Hrvatski</option> <option value="43">Български</option> <option value="44">Slovenčina</option> <option value="42">Slovenščina</option> <option value="45">Беларускі</option> <option value="46">Українська</option> <option value="26">Svenska</option> <option value="27">Norsk</option> <option value="34">Suomi</option> <option value="29">Dansk</option> <option value="13">Nederlands</option> <option value="33">Íslenska</option> <option value="12">簡體中文</option> <option value="8">繁體中文</option> <option value="9">日本語</option> <option value="10">한국어</option> <option value="16">العربية</option> <option value="53">ગુજરાતી</option> <option value="17">עברית</option> <option value="21">हिन्दी</option> <option value="25">മലയാളം</option> <option value="54">ଓଡ଼ିଆ</option> <option value="31">فارسی</option> <option value="55">ਪੰਜਾਬੀ</option> <option value="56">অসমীয়া</option> <option value="47">বাংলা</option> <option value="48">اُردُو&lrm;</option> <option value="49">தமிழ்</option> <option value="50">Kiswahili</option> <option value="51">Afrikaans</option> <option value="57">मराठी</option> <option value="11">Other</option> </select> </div> </div> <div class="form-group inline-form copyright-form"> <div class="form-wrapper"> <label>Copyright</label> <span data-toggle="popover" class="popover-icon" id="copyright-tooltip" title="" data-original-title="Who owns your story?"><span class="fa fa-info fa-wp-lightergrey " aria-hidden="true" style="font-size:16px;"></span></span> <select id="copyrightSelect" class="form-control "> <option value="0">Not Specified</option> <option value="1">All Rights Reserved</option> <option value="2">Public Domain</option> <option value="3">Creative Commons (CC) Attribution</option> <option value="4">(CC) Attrib. NonCommercial</option> <option value="5">(CC) Attrib. NonComm. NoDerivs</option> <option value="6">(CC) Attrib. NonComm. ShareAlike</option> <option value="7">(CC) Attribution-ShareAlike</option> <option value="8">(CC) Attribution-NoDerivs</option> </select> </div> </div> </div> <div class="form-group rating-form"> <div class="form-wrapper"> <label class="rating-label">Rating</label> <span data-toggle="popover" class="popover-icon" id="rating-tooltip" title="" data-original-title="Rate your story"><span class="fa fa-info fa-wp-lightergrey " aria-hidden="true" style="font-size:16px;"></span></span> <span class="toggle-prompt">Mature</span> <div class="onoffswitch "> <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="mature-switch"> <label class="onoffswitch-label" for="mature-switch"> <div class="onoffswitch-inner"> <span class="on">ON</span> <span class="off">OFF</span> </div> <span class="onoffswitch-switch"></span> </label> </div> </div>

先感謝您！

Answer 1

您正在尋找的這些id不是由他們自己生成的。

您需要將id分配給您喜歡的字段。

我不喜歡使用id來實現css 。 元素id只需要實現javascript並從input標簽中獲取值示例。

您需要在寫下您的代碼時分配id ，如以下示例html 。

注意事項：

並非所有標簽都有id 。
大多數與用戶輸入相關的標簽都有id 。
沒有 2 個元素/標簽具有相同的id 。
不同類型元素的id用於不同目的，例如<div> ， <span> id用於顯示隱藏，而input id用於獲取值。

HTML：

<!DOCTYPE html>
<html >
    <head>
        <meta charset="UTF-8">    
        <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="/css/app.css" />
        <link rel="icon" href="logo.jpg" />
        <title>Info</title>
    </head>
    <body>
        <div class="col-md-6 offset-md-3">
            <div class="col-md-6">
                <p class="btn btn-primary form-control" onclick="showForm('#addInfo')">Add Detail</p>
            </div>
            <div class="col-md-6">
                <p class="btn btn-primary form-control" onclick="showForm('#showInfo');getDetail();">Show Detail</p>
            </div>
            <!-- No need for `form` as will use JavaScript for Single Page Application -->
            <div id="addInfo" class="hide">
                <div id="data"></div>
                <div class="col-md-12 form-group">
                    <label for="addEmail">Email:</label>
                    <input id="addEmail" class="form-control" type="email">
                    <span id="addEmailError" class="hide error">Valid Email Required</span>
                </div>
                <div class="col-md-12 form-group">
                    <label for="addFname">First Name:</label>
                    <input id="addFname" class="form-control" type="text">
                    <span id="addFnameError" class="hide error">Valid First Name Required</span>
                </div>
                <div class="col-md-12 form-group">
                    <label for="addLname">Last Name:</label>
                    <input id="addLname" class="form-control" type="text">
                    <span id="addLnameError" class="hide error">Valid Last Name Required</span>
                </div>
                <div class="col-md-12 form-group">
                    <label for="addPhone">Phone:</label>
                    <input id="addPhone" class="form-control" type="text">
                    <span id="addPhoneError" class="hide error">Valid Phone Required</span>
                </div>
                <div class="col-md-12 form-group">
                    <label for="addGender">Gender:</label>
                    <select id="addGender" class="form-control">
                        <option value="">Select:</option>
                        <option value="male">Male</option>
                        <option value="female">Female</option>
                    </select>
                    <span id="addGenderError" class="hide error">Gender Required</span>
                </div>
                <div class="col-md-12 form-group">
                    <p class="btn btn-primary form-control" onclick="addInfo()">Submit</p>
                </div>
            </div>
            <!-- No need for `form` as will use JavaScript for Single Page Application -->
            <div id="showInfo" class="hide">
                <div id="showDetails" class="col-md-12"></div>
            </div>
        </div>
        <script type="text/javascript" src="/js/jquery.min.js"></script>
        <!-- `login.js` is only used in `login.ejs` -->
        <script type="text/javascript" src="/js/addInfo.js"></script>
        <script type="text/javascript" src="/js/getInfo.js"></script>
        <script type="text/javascript" src="/js/service.js"></script>
    </body>
</html>

addInfo.js :

"use strict";

function addInfo() {
    // JavaScript uses `id` to fetch value
    let email               = $("#addEmail").val(),
        fName               = $("#addFname").val(),
        lName               = $("#addLname").val(),
        phone               = $("#addPhone").val(),
        gender              = $("#addGender").val();

    // Show error `span` when email is invalid
    if ( validateEmail(email) ) {
        $("#addEmailError").addClass("hide");
    } else {
        $("#addEmailError").removeClass("hide");
        return;
    }

    // Show error `span` when First Name is invalid
    if ( validateFname(fName) ) {
        $("#addFnameError").addClass("hide");
    } else {
        $("#addFnameError").removeClass("hide");
        return;
    }

    // Show error `span` when Last Name is invalid
    if ( validateLname(lName) ) {
        $("#addLnameError").addClass("hide");
    } else {
        $("#addLnameError").removeClass("hide");
        return;
    }

    // Show error `span` when Phone is invalid
    if ( validatePhone(phone) ) {
        $("#addPhoneError").addClass("hide");
    } else {
        $("#addPhoneError").removeClass("hide");
        return;
    }

    // Show error `span` when Gender is invalid
    if ( validateGender(gender) ) {
        $("#addGenderError").addClass("hide");
    } else {
        $("#addGenderError").removeClass("hide");
        return;
    }

    // Calling local API to set authentication
    // Everything in public is visible for hackers
    // Thus to hide auth calling local backend
    $.ajax({
        "url": "/v1/detail",
        "method": "POST",
        "data": {email, fName, lName, phone, gender}
    })
    .then( result => {
        // On success empty all the input fields.
        $("#addEmail").val('');
        $("#addFname").val('');
        $("#addLname").val('');
        $("#addPhone").val('');
        $("#addGender").val("");

        // Message to notify success submition
        alert("Successfully added user.");
        return;
    })
    .catch( err => {
        // Notify in case some error occured
        alert("An error occured.");
        return;
    });
}

getInfo.js :

"use strict";

function getDetail () {

    // Request to get details of all user.
    $.ajax({
        "url": "http://localhost:4000/v1/detail",
        "method": "GET"
    })
    .then( result => {
        // On success using table to display data.
        // This table is dynamic.
        let table = `<div class="alert alert-success" role="alert">
                        Details fetched successfully.
                    </div>
                    <table class="table">
                        <thead>
                            <tr>
                                <th scope="col">#</th>`;

        let headers = [];

        // Setting dynamic headers to ease work at frontend in case field changes
        for ( let key in result[0] ) headers.push(key);
        for ( let h of headers ) table += `<th scope="col">` + h + `</th>`;

        table += `          </tr>
                        </thead>
                        <tbody>`;
        let i = 1;

        // Dynaic rows of table based upon headers.
        for(let row of result) {
            table += `      <tr>
                                <th scope="row">` + i + `</th>`;

            for (let key of headers) table += `<td>` + row[key] + `</td>`;

            table += `      </tr>`;
            i++;
        }

        table += `      </tbody>
                    </table>`;

        // Loading dynamic table into our static HTML page.
        $("#showDetails").html(table);
    })
    .catch( err => {
        // If error setting dynamic error
        let data = `<label class="alert alert-warning">Unable to fetch details</label>`;

        // Loading dynamic error into our static HTML page
        $("#showDetails").html(data);
    })

}

service.js :

"use strict";

/**
 * Common services used by all the other scripts
 * All these are generic functions
 *  
*/

// To toggle between different views
function showForm (id) {
    // Hide all views
    $("#addInfo").addClass("hide");
    $("#showInfo").addClass("hide");

    // Show the view user had clicked
    $(id).removeClass("hide");
}

// Validate Email based upon pattern
function validateEmail (email) {
    if ( email && email.match(/^([A-z0-9_.]{2,})([@]{1})([A-z]{1,})([.]{1})([A-z.]{1,})*$/) ) {
        return true;
    }
    return false;
}

// Validate First Name based upon pattern
function validateFname (fName) {
    if ( fName && fName.match(/^([A-z]{2,})*$/) ) {
        return true;
    }
    return false;
}

// Validate Last Name based upon pattern
function validateLname (lName) {
    if ( lName && lName.match(/^([A-z]{2,})*$/) ) {
        return true;
    }
    return false;
}

// Validate Phone based upon pattern
function validatePhone (phone) {
    if ( phone && phone.match(/^([0-9]{10})*$/) ) {
        return true;
    }
    return false;
}

// Validate Gender based upon pattern
function validateGender (gender) {
    if ( gender && gender.match(/^([A-z]{4,6})*$/) && (gender === "male" || gender === "female") ) {
        return true;
    }
    return false;
}

如何獲得這種形式的 div id？

問題描述

1 個解決方案

解決方案1
0 2018-09-14 19:36:45

如何獲得這種形式的 div id？

問題描述

1 個解決方案

解決方案1 0 2018-09-14 19:36:45

解決方案1
0 2018-09-14 19:36:45