弹出之后,可以显示文本框的内容,但是文本框会出现乱码,怎么解决


html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title>
        <script type="text/javascript">
            function ok(){
                var yhm=document.getElementById('yonghuming').value;
                var mm=document.getElementById('mima').value;
                var xb=document.getElementById('xingbie').value;
                var nl=document.getElementById('nianling').value;
                var jg=document.getElementById("jg");
                var xh=document.getElementsByName('checkbox');
                alert('恭喜,注册成功!');
                document.write('用户名'+yhm+'
'
+'密码是'+mm+'
'
+'性别是'+xb+'
'
+'年龄是'+nl+'
'
+'籍贯是'+jg+'
'
+'爱好是'+xh); }
script> head> <body> <table> <tr align="right"> <td>用户名td> <td><input type="text" id="yonghuming">td> tr> <tr align="right"> <td>密码td> <td><input type="password" id="mima">td> tr> <tr align="right"> <td>性别td> <td><input type="text" id="xingbie">td> tr> <tr align="right"> <td>年龄td> <td><input type="text" id="nianling">td> tr> <tr align="right"> <td id="jg">籍贯 <select> <option value='广东省'>广东省option> <option value='江西省'>江西省option> <option value='湖北省'>湖北省option> <option value='湖南省'>湖南省option> <option value='海南省'>海南省option> select> td> tr> <tr align="right"> <td id="xihao">爱好 <input type="checkbox" name="checkbox" value="youxi">游戏 <input type="checkbox" name="checkbox" value="lvyou">旅游 <input type="checkbox" name="checkbox" value="yinyue">音乐 <input type="checkbox" name="checkbox" value="jianshen">健身 td> tr> <tr align="center"> <td> <input type="button"value="提交注册" id="ok" onclick="javascript:ok()"> td> tr> table> body> html>

你的html页面保存的时候,选择编码选择的是utf-8么

乱码通常是由于编码格式不匹配导致的。在你的HTML代码中,你已经使用了指定了字符编码,但是在JavaScript代码中你使用了alert函数和document.write方法输出文本内容。这些函数的编码方式可能与你的HTML页面的编码方式不匹配,导致出现乱码。

要解决这个问题,可以尝试使用console.log方法代替alert和document.write方法输出文本内容,因为console.log方法默认使用与页面相同的编码方式。或者,你也可以在JavaScript代码中使用encodeURIComponent方法对输出的文本进行编码,以确保输出的文本与页面的编码方式匹配。

以下是使用console.log方法的示例代码:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            function ok(){
                var yhm=document.getElementById('yonghuming').value;
                var mm=document.getElementById('mima').value;
                var xb=document.getElementById('xingbie').value;
                var nl=document.getElementById('nianling').value;
                var jg=document.getElementById("jg");
                var xh=document.getElementsByName('checkbox');
                console.log('用户名'+yhm+'\n'+'密码是'+mm+'\n'+'性别是'+xb+'\n'+'年龄是'+nl+'\n'+'籍贯是'+jg+'\n'+'爱好是'+xh);
                alert('恭喜,注册成功!');
            }
        </script>
    </head>
    <body>
        <table>
            <tr align="right">
                <td>用户名</td>
                <td><input type="text" id="yonghuming"></td>
                </tr>
            <tr align="right">
                <td>密码</td>
                <td><input type="password" id="mima"></td>
                </tr>
            <tr align="right">
                <td>性别</td>
                <td><input type="text" id="xingbie"></td>
                </tr>
            <tr align="right">
                <td>年龄</td>
                <td><input type="text" id="nianling"></td>
                </tr>
            <tr align="right">
                <td id="jg">籍贯
                <select>
                    <option value='广东省'>广东省</option>
                    <option value='江西省'>江西省</option>
                    <option value='湖北省'>湖北省</option>
                    <option value='湖南省'>湖南省</option>
                    <option value='海南省'>海南省</option>
                </select>
                </td>
                </tr>
            <tr align="right">
                <td id="xihao">爱好
                <input type="checkbox" name="checkbox" value="youxi">游戏
                <input type="checkbox" name="checkbox" value="lvyou">旅游
                <input type="checkbox" name="checkbox" value="yinyue">音乐
                <input type="checkbox" name="checkbox" value="jianshen">健身
                </td>
                </tr>
                <tr align="center">
                    <