时间戳

首页 > 解决方案 > MDL：以编程方式在 javascript 中设置组件的值/状态

javascript - MDL：以编程方式在 javascript 中设置组件的值/状态

问题描述

我是java和html的绝对初学者。我正在尝试在页面加载开始时以及在接收到 websocket 之后从 json 变量加载我的 html 组件。为了确保加载连接和 html，我使用了这个：

connection.addEventListener('open', (event) => {
console.log('Connected: ');
if (document.readyState === 'complete') {
    console.log('complete: ');
    getDataConfig();     
}

getDataConfig() 填充 json，并且必须设置收音机、文本和滑块，但不起作用。

所以我尝试通过一个简单的按钮来调用函数 DALE() （仅适用于收音机）：

function dale() {
console.log("DALE");
document.getElementById('Datobarra0').checked = true;
document.getElementById('Datobarra1').checked = false;
document.getElementById('Datobarra2').checked = false;

}

这是单选按钮的 html：

<div>
    <table class="mdl-data-table mdl-js-data-table">
        <thead>
            <tr>
                <th class="mdl-data-table__cell--non-numeric">Dato Barra</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>
                    <label class="mdl-radio mdl-js-radio" for="Datobarra0">
                        <input type="radio" id="Datobarra0" name="Datobarra" class="mdl-radio__button" value="0" >
                        <span class="mdl-radio__label">NADA</span>
                    </label>
                </td>

                <td>
                    <label class="mdl-radio mdl-js-radio" for="Datobarra2">
                        <input type="radio" id="Datobarra2" name="Datobarra" class="mdl-radio__button" value="2" >
                        <span class="mdl-radio__label">RPM</span>
                    </label>
                </td>

                <td>
                    <label class="mdl-radio mdl-js-radio" for="Datobarra1">
                        <input type="radio" id="Datobarra1" name="Datobarra" class="mdl-radio__button" value="1" >
                        <span class="mdl-radio__label">VEL</span>
                    </label>
                </td>
            </tr>

        </tbody>
    </table>
</div>

似乎没有任何效果。我为此尝试了很多很多方法。我不想使用 jquery，因为这是另一个要学习的新东西，我知道 C 和 C++，所以 java 对我来说似乎更容易。

有什么帮助吗？提前感谢古斯塔沃。

function dale() {
    console.log("DALE");
    document.getElementById('Datobarra0').checked = true;
    document.getElementById('Datobarra1').checked = false;
    document.getElementById('Datobarra2').checked = false;
}
<head>
    <link rel="stylesheet" href="vendor/google-fonts.css">
    <script src="vendor/material.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

    <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
    <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
    </script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">-->
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="vendor/mainconfig.js"></script>

    <style>
        td {
            justify-content: left;
            text-align: left;
            width: 100%;
        }
        
        tr {
            justify-content: left;
            text-align: left;
            width: 100%;
        }
        
        .mdl-radio__label {
            justify-content: left;
            text-align: left;
        }
        
        .mdl-button {
            width: 100%;
        }
    </style>
</head>



<body>
<div>
        <table class="mdl-data-table mdl-js-data-table">
            <thead>
                <tr>
                    <th class="mdl-data-table__cell--non-numeric">Dato Barra</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>
                        <label class="mdl-radio mdl-js-radio" for="Datobarra0">
                            <input type="radio" id="Datobarra0" name="Datobarra" class="mdl-radio__button" value="0" >
                            <span class="mdl-radio__label">NADA</span>
                        </label>
                    </td>

                    <td>
                        <label class="mdl-radio mdl-js-radio" for="Datobarra2">
                            <input type="radio" id="Datobarra2" name="Datobarra" class="mdl-radio__button" value="2" >
                            <span class="mdl-radio__label">RPM</span>
                        </label>
                    </td>

                    <td>
                        <label class="mdl-radio mdl-js-radio" for="Datobarra1">
                            <input type="radio" id="Datobarra1" name="Datobarra" class="mdl-radio__button" value="1" >
                            <span class="mdl-radio__label">VEL</span>
                        </label>
                    </td>
                </tr>

            </tbody>
        </table>
    </div>
    <button class="mdl-button mdl-js-button mdl-button--raised" onclick="dale()">UPDATE</button>
    </body>

升级：好吧，我尝试最小化代码，但它仍然无法正常工作：如果我删除“”它可以工作，但没有更多的 MDL 网络......不工作代码：

function dale() {
    document.getElementById('Datobarra0').checked = true;
    document.getElementById('Datobarra1').checked = false;
    document.getElementById('Datobarra2').checked = false;
}
<html>
<head>
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

</head>
<body>
    <div>
        <table class="mdl-data-table mdl-js-data-table">
            <thead>
                <tr>
                    <th class="mdl-data-table__cell--non-numeric">Dato Barra</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>
                        <label class="mdl-radio mdl-js-radio" for="Datobarra0">
                            <input type="radio" id="Datobarra0" name="Datobarra" class="mdl-radio__button" value="0" >
                            <span class="mdl-radio__label">NADA</span>
                        </label>
                    </td>

                    <td>
                        <label class="mdl-radio mdl-js-radio" for="Datobarra2">
                            <input type="radio" id="Datobarra2" name="Datobarra" class="mdl-radio__button" value="2" >
                            <span class="mdl-radio__label">RPM</span>
                        </label>
                    </td>

                    <td>
                        <label class="mdl-radio mdl-js-radio" for="Datobarra1">
                            <input type="radio" id="Datobarra1" name="Datobarra" class="mdl-radio__button" value="1" >
                            <span class="mdl-radio__label">VEL</span>
                        </label>
                    </td>
                </tr>

            </tbody>
        </table>
    </div>

    <!-- Raised button -->

    <button class="mdl-button mdl-js-button mdl-button--raised" onclick="dale()">UPDATE</button>


</body>



</html>

工作代码：

function dale() {
    document.getElementById('Datobarra0').checked = true;
    document.getElementById('Datobarra1').checked = false;
    document.getElementById('Datobarra2').checked = false;
  
}
<html>
<head>
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">


</head>
<body>
    <div>
        <table class="mdl-data-table mdl-js-data-table">
            <thead>
                <tr>
                    <th class="mdl-data-table__cell--non-numeric">Dato Barra</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>
                        <label class="mdl-radio mdl-js-radio" for="Datobarra0">
                            <input type="radio" id="Datobarra0" name="Datobarra" class="mdl-radio__button" value="0" >
                            <span class="mdl-radio__label">NADA</span>
                        </label>
                    </td>

                    <td>
                        <label class="mdl-radio mdl-js-radio" for="Datobarra2">
                            <input type="radio" id="Datobarra2" name="Datobarra" class="mdl-radio__button" value="2" >
                            <span class="mdl-radio__label">RPM</span>
                        </label>
                    </td>

                    <td>
                        <label class="mdl-radio mdl-js-radio" for="Datobarra1">
                            <input type="radio" id="Datobarra1" name="Datobarra" class="mdl-radio__button" value="1" >
                            <span class="mdl-radio__label">VEL</span>
                        </label>
                    </td>
                </tr>

            </tbody>
        </table>
    </div>

    <!-- Raised button -->

    <button class="mdl-button mdl-js-button mdl-button--raised" onclick="dale()">UPDATE</button>


</body>



</html>

标签： javascript

解决方案

升级：正如上面的 ChrisG 评论，有一个关于此的线程。这有效：

function Dale() {
 document.getElementById('Datobarra0').parentNode.MaterialRadio.check();
    document.getElementById('Datobarra1').parentNode.MaterialRadio.uncheck();
    document.getElementById('Datobarra2').parentNode.MaterialRadio.uncheck();
}
<html>

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

    <script type="text/javascript" src="vendor/mainconfig.js"></script>

    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        td {
            justify-content: left;
            text-align: left;
            width: 100%;
        }
        
        tr {
            justify-content: left;
            text-align: left;
            width: 100%;
        }
        
        .mdl-radio__label {
            justify-content: left;
            text-align: left;
        }
        
        .mdl-button {
            width: 100%;
        }
    </style>
</head>

<body>
<div>
        <table class="mdl-data-table mdl-js-data-table">
            <thead>
                <tr>
                    <th class="mdl-data-table__cell--non-numeric">Dato Barra</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>
                        <label class="mdl-radio mdl-js-radio" for="Datobarra0">
                        <input type="radio" id="Datobarra0" name="Datobarra" class="mdl-radio__button" value="0" >
                        <span class="mdl-radio__label">NADA</span>
                    </label>
                    </td>

                    <td>
                        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="Datobarra1">
                        <input type="radio" id="Datobarra1" name="Datobarra" class="mdl-radio__button" value="1">
                        <span class="mdl-radio__label">VEL</span>
                    </label>
                    </td>

                    <td>
                        <label class="mdl-radio mdl-js-radio" for="Datobarra2">
                        <input type="radio" id="Datobarra2" name="Datobarra" class="mdl-radio__button" value="2" >
                        <span class="mdl-radio__label">RPM</span>
                    </label>
                    </td>
                </tr>

            </tbody>
        </table>
    </div>

    <button class="mdl-button mdl-js-button mdl-button--raised" onclick="Dale()">DALE</button>
    
    </body>



</html>

推荐阅读