如何从Javascript中的变量定义HTML标记_Javascript_Html

如何从Javascript中的变量定义HTML标记

javascript html

如何从Javascript中的变量定义HTML标记,javascript,html,Javascript,Html,我试图从数组中选择一个字符串，将其分配给一个变量，并使该变量成为HTML中的占位符标记。这就是我目前所拥有的对于我的javascript，我有 var items=[“和平搜索”、“用DuckDuckGo搜索”、“按喇叭！”、“你的搜索对我来说是安全的”、“不要用谷歌搜索它！”、“DuckIt！”]；函数随机项（项） { var searchterm=items[Math.floor（Math.random（）*items.length）]； document.getElementBy

我试图从数组中选择一个字符串，将其分配给一个变量，并使该变量成为HTML中的占位符标记。这就是我目前所拥有的

对于我的javascript，我有

var items=[“和平搜索”、“用DuckDuckGo搜索”、“按喇叭！”、“你的搜索对我来说是安全的”、“不要用谷歌搜索它！”、“DuckIt！”]；
函数随机项（项）
{
var searchterm=items[Math.floor（Math.random（）*items.length）]；
document.getElementById（“q”）.placeholder=searchterm；
}

我做错了什么

只需替换“名称”

<input class="search" type="text" name="q" autofocus>

要“id”，请执行以下操作：

<input class="search" type="text" id="q" autofocus>

您正在查找id为

document.getElementById("q")

但是您的输入没有这个id，尽管它有属性名

<input class="search" type="text" name="q" autofocus>

或者添加id

<input class="search" type="text" id="q" name="q" autofocus>

您的

输入

标记有

name=“q”

但没有

id=“q”

let items=[“和平搜索”、“用DuckDuckGo搜索”、“按喇叭！”、“你的搜索对我来说是安全的”、“不要用谷歌搜索它！”、“DuckIt！”]；
函数随机项（项）{
让searchterm=items[Math.floor（Math.random（）*items.length）]；
console.log（searchterm）；
document.getElementById（“q”）.placeholder=searchterm；
}
随机项目（个）
输入[类型=文本]{
最小宽度：400px；
}



问题是，同一元素上不能有多个同名的HTML属性
因此，只有第一个onload
属性有效，浏览器将忽略其余属性
此外，您的输入有一个名称的q
，而不是id
，因此您必须添加一个id才能使getElementsById
找到它
解决前一个问题的方法：
仅使用一个onload属性：
<body onload="startTime(); random_item(items)" background="backgroundimg.png">


您可以将addEventListener
与DOMContentLoaded
事件一起使用，该事件在页面的DOM就绪后立即触发，而不必等待页面（包括图像、iFrame等）完成加载：
document.addEventListener('load',startTime)
document.addEventListener('DOMContentLoaded',()=>random_items(items))


您的输入标记没有id属性，这有时确实有意义。
选择器搜索id。如果要按名称选择输入字段，只需使用document.querySelector（'input[name=“q”]）。
您的JavaScript很好
var items = ["Search in Peace", "Search with DuckDuckGo", "Honk It!", "Your Search is Safe With Me", "Don't Google It!", "Duck It!"];
function random_item(items){
    var searchterm = items[Math.floor(Math.random()*items.length)];
    document.getElementById("q").placeholder = searchterm;
}

function startTime(){}

但是您需要将“q”id添加到文本输入中，如下所示：
<input class="search" type="text" name="q" id="q" autofocus>

<body onload="startTime();random_item(items);" background="backgroundimg.png">



并将身体onload调用统一为一个调用，如下所示：
<input class="search" type="text" name="q" id="q" autofocus>

<body onload="startTime();random_item(items);" background="backgroundimg.png">



下面是一个完整的工作示例：
<html>
    <head>
        <script>
            var items = ["Search in Peace", "Search with DuckDuckGo", "Honk It!", "Your Search is Safe With Me", "Don't Google It!", "Duck It!"];
            function random_item(items){
                var searchterm = items[Math.floor(Math.random()*items.length)];
                document.getElementById("q").placeholder = searchterm;
            }

            function startTime(){}
        </script>
    </head>
    <body onload="startTime();random_item(items);" background="backgroundimg.png">
        <form  action="https://duckduckgo.com/?q=" method="GET">
            <input class="search" type="text" name="q" id="q" autofocus>
            <br>
            <input class="button" type="submit" value="Go!">
        </form>
    </body>
</html>


var items=[“和平搜索”，“用DuckDuckGo搜索”，“按喇叭！”，“你的搜索对我来说是安全的”，“不要用谷歌搜索！”，“DuckIt！”；
函数随机项（项）{
var searchterm=items[Math.floor（Math.random（）*items.length）]；
document.getElementById（“q”）.placeholder=searchterm；
}
函数startTime（）{}


您的函数在哪里调用？我的函数在体内加载时调用。您的输入标签中没有id。