javascript-在实现了基于选择隐藏按钮的下拉菜单后，将文本插入word文档的按钮不再工作

落寞瓜子壳 lv.3

发布时间：2022-06-23 13:39:38 303

相关标签： # 前端

总新手在这里。在实现基于选择隐藏按钮的下拉菜单后，将文本插入 Word 文档的按钮不再起作用。起初，当我只有几个按钮插入文本片段时，它起作用了，但现在我添加了一个下拉菜单来更改显示和可访问的按钮，这些按钮不再起作用，无法弄清楚我搞砸了什么。

我通常在下拉框中关注微软的教程HERE和这个youtube 视频。

我相信这是一个非常新手的问题，但任何帮助表示赞赏。谢谢！

'use strict';

(function () {

    Office.onReady(function () {
        // Office is ready.
        $(document).ready(function () {
            // The document is ready.
            // Use this to check whether the API is supported in the Word client.
            if (Office.context.requirements.isSetSupported('WordApi', '1.1')) {
                // Do something that is only available via the new APIs.
                $('#rogincorporate').click(insertRogIncorporate);
                $('#supportedVersion').html('This code is using Word 2016 or later.');
            }
            else {
                // Just letting you know that this code will not work with your version of Word.
                $('#supportedVersion').html('This code requires Word 2016 or later.');
            }
        });
    });

    async function insertRogIncorporate() {
        await Word.run(async (context) => {

            // Create a proxy object for the document.
            const thisDocument = context.document;

            // Queue a command to get the current selection.
            // Create a proxy range object for the selection.
            const range = thisDocument.getSelection();

            // Queue a command to replace the selected text.
            range.insertText('"Responding Party adopts and incorporates the General Response and Objections above in response to this interrogatory as though separately set forth herein. "\n', Word.InsertLocation.replace);

            // Synchronize the document state by executing the queued commands,
            // and return a promise to indicate task completion.
            await context.sync();
            console.log('Added a incorporate text.');
        })
            .catch(function (error) {
                console.log('Error: ' + JSON.stringify(error));
                if (error instanceof OfficeExtension.Error) {
                    console.log('Debug info: ' + JSON.stringify(error.debugInfo));
                }
            });
    }

})();

/* Page-specific styling */

#content-header {
    background: #2a8dd4;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    overflow: hidden;
}

#content-main {
    background: #fff;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}

.padding {
    padding: 15px;
}

.hide {
    display: none;
}


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Word Add-In with Commands Sample</title>

    <script src="Scripts/jquery-3.6.0.js" type="text/javascript"></script>
    <script src="Scripts/MessageBanner.js" type="text/javascript"></script>
    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>

    <!-- To enable offline debugging using a local reference to Office.js, use:  -->
    <!-- <script src="Scripts/Office/MicrosoftAjax.js" type="text/javascript"></script>  -->
    <!-- <script src="Scripts/Office/1/office.js" type="text/javascript"></script>  -->

    <script src="Home.js" type="text/javascript"></script>
    <link href="Home.css" rel="stylesheet" type="text/css" />
    <link href="../Content/Button.css" rel="stylesheet" type="text/css" />
    <link href="../Content/MessageBanner.css" rel="stylesheet" type="text/css" />


    <!-- For Office UI Fabric Core, go to https://aka.ms/office-ui-fabric to learn more. -->
    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.0/css/fabric.min.css">

    <!-- To enable the offline use of Office UI Fabric Core, use: -->
    <!-- link rel="stylesheet" href="Content/fabric.min.css" -->

    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            outline: none;
        }

        body {
            font-family: 'Times New Roman', sans-serif;
        }

        .wrapper {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            padding: 70px 0;
            max-width: 400px;
            margin: 0 auto;
        }

        .menu,
        .content {
            width: 100%;
        }

        select {
            width: 100%;
            padding: 15px;
            font-size: 16px;
            font-weight: 700;
            font-family: 'Times New Roman', sans-serif;
            border: none;
            border-radius: 8px;
            border: 2px solid #3f51b5;
            box-shadow: 0 15px 15px #efefef;
            background: #e8eaf6;
        }

        .padding {
            justify-content: center;
        }

        .data {
            display: none;
        }
    </style>
</head>

<body>
    <div id="content-header">
        <div class="padding">
            <h1>Discovery Toolkit</h1>
        </div>
    </div>


    <div class="wrapper">
        <div class="menu">
            <br />
            <h2>Type of Discovery:</h2>
            <br />
            <select id="name">
                <option value="rog">Interrogatories</option>
                <option value="rfp">Requests for Production</option>
                <option value="rfa">Requests for Admission</option>
            </select>
            <br />
            <br />
        </div>


        <div class="content">
            <div id="rog" class="data">
                <h3>Interrogatory Objections</h3>
                <p>Click the appropriate button to insert an objection.</p>
                <br />
                <button id="rogincorporate">Incorporate General Response and Objections</button>
                <br /><br />
            </div>


            <div id="rfp" class="data">

            </div>

            <div id="rfa" class="data">

            </div>

        </div>
    </div>
    <div id="supportedVersion" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>

        $(document).ready(function () {
            $("#name").on('change', function () {
                $(".data").hide();
                $("#" + $(this).val()).fadeIn(700);
            }).change();
        });

    </script>


</body>
</html>

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。